@sonordev/site-kit 6.1.1 → 6.2.0

package/dist/{chunk-3SHAY7PK.mjs → chunk-22WIVF4O.mjs}

@@ -1,12 +1,65 @@
 'use client';
 import { chatLauncherStyles } from './chunk-4U5NCKQY.mjs';
 import { GlassStyles } from './chunk-OBKS3CPP.mjs';
-import { useForm } from './chunk-YZMI7QQ2.mjs';
-import { sonorFetch } from './chunk-6ZMEJSNX.mjs';
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useForm } from './chunk-EG3F5AHL.mjs';
+import { parseColor, relativeLuminance, DARK_LUMINANCE, contrastRatio } from './chunk-NYXENHD2.mjs';
+import { sonorFetch } from './chunk-ZZ6P27A5.mjs';
+import { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// 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 = 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 = parseColor(color);
+  if (!rgb) return fallback;
+  const { r, g, b } = round(rgb);
+  return `${r}, ${g}, ${b}`;
+}
+function brandTextColor(brand, panelTint) {
+  const tint = panelTint && parseColor(panelTint) || WHITE;
+  const pole = relativeLuminance(tint) < DARK_LUMINANCE ? WHITE : BLACK;
+  const rgb = parseColor(brand);
+  if (!rgb) return `color-mix(in srgb, ${brand} ${UNREADABLE_BRAND_SHARE}%, ${toHex(pole)})`;
+  const surface = relativeLuminance(mix(rgb, tint, RESTING_TINT));
+  const reads = (c) => contrastRatio(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})`;
 }
@@ -192,7 +245,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",
@@ -205,7 +258,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     }
   );
 }
-function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSuggest }) {
+function SuggestActionChip({ action, message, primaryColor, primaryRgb, brandText, onSuggest }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -216,7 +269,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"
       },
@@ -224,7 +277,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");
@@ -256,6 +309,7 @@ function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
           message: label,
           primaryColor,
           primaryRgb,
+          brandText,
           onSuggest
         },
         `chip-${i}`
@@ -263,6 +317,71 @@ function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
     }) }) : null
   ] });
 }
+
+// src/engage/chat-messages.ts
+function userRequestedHandoff(text) {
+  const lower = text.toLowerCase().trim();
+  const patterns = [
+    /\b(talk|speak)\s+(to|with)\s+(a\s+)?(person|human|agent|representative|someone)\b/,
+    /\b(real|live)\s+(person|human|agent|support)\b/,
+    /\bconnect\s+(me\s+)?(with|to)\s+(a\s+)?(person|human|agent)\b/,
+    /\b(need|want)\s+(to\s+)?(talk|speak)\s+(to|with)\s+(someone|a\s+person)\b/,
+    /\bhuman\s+(support|agent|help)\b/,
+    /\b(talk|speak)\s+to\s+(a\s+)?person\b/,
+    /\bget\s+(a\s+)?(person|human)\b/
+  ];
+  return patterns.some((p) => p.test(lower));
+}
+function visitorMessage(content, attachments = []) {
+  return {
+    id: `user-${Date.now()}`,
+    role: "user",
+    content,
+    timestamp: /* @__PURE__ */ new Date(),
+    ...attachments.length ? { attachments } : {}
+  };
+}
+function openingMessages(welcome, initialMessage) {
+  const opening = [{ id: "welcome", role: "assistant", content: welcome, timestamp: /* @__PURE__ */ new Date() }];
+  if (initialMessage) opening.push(visitorMessage(initialMessage));
+  return opening;
+}
+function echoReplyMessage(reply, probe) {
+  return {
+    id: `ai-${Date.now()}`,
+    role: "assistant",
+    content: reply.content,
+    timestamp: /* @__PURE__ */ new Date(),
+    ...reply.suggestions?.length ? { suggestions: reply.suggestions } : {},
+    ...reply.uiActions?.length ? { uiActions: reply.uiActions } : {},
+    ...reply.offerHandoff || userRequestedHandoff(probe) ? { offerHandoff: true } : {}
+  };
+}
+function echoErrorMessage() {
+  return {
+    id: `err-${Date.now()}`,
+    role: "assistant",
+    content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
+    timestamp: /* @__PURE__ */ new Date(),
+    suggestions: ["Talk to a person", "Try again"],
+    offerHandoff: true
+  };
+}
+async function askEcho(content, deps) {
+  deps.setLoading(true);
+  try {
+    const reply = await deps.send(content);
+    deps.append(echoReplyMessage(reply, content));
+  } catch (err) {
+    deps.onError?.(err);
+    deps.append(echoErrorMessage());
+  } finally {
+    deps.setLoading(false);
+  }
+}
+function deliverOpeningMessage(pending, route) {
+  return route.signalEnabled ? route.ask(pending) : route.emitLive(pending);
+}
 function getApiConfig() {
   const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
   const defaultApiUrl = isDev && process.env?.SONOR_API_URL ? process.env.SONOR_API_URL : "https://api.sonor.io";
@@ -285,19 +404,6 @@ function linkifyUrls(text) {
     (_, before, url) => `${before}[${url}](${url})`
   );
 }
-function userRequestedHandoff(text) {
-  const lower = text.toLowerCase().trim();
-  const patterns = [
-    /\b(talk|speak)\s+(to|with)\s+(a\s+)?(person|human|agent|representative|someone)\b/,
-    /\b(real|live)\s+(person|human|agent|support)\b/,
-    /\bconnect\s+(me\s+)?(with|to)\s+(a\s+)?(person|human|agent)\b/,
-    /\b(need|want)\s+(to\s+)?(talk|speak)\s+(to|with)\s+(someone|a\s+person)\b/,
-    /\bhuman\s+(support|agent|help)\b/,
-    /\b(talk|speak)\s+to\s+(a\s+)?person\b/,
-    /\bget\s+(a\s+)?(person|human)\b/
-  ];
-  return patterns.some((p) => p.test(lower));
-}
 var BUBBLE_BG = "color-mix(in srgb, var(--sk-bg, #ffffff) 94%, transparent)";
 var HAIRLINE = "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 9%, transparent)";
 var ECHO_STYLE_HREF = "sk-echo";
@@ -309,27 +415,58 @@ 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})`;
 }
-function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, signalUrl: propSignalUrl, suggested_questions: propSuggestedQuestions, assistant_name: propAssistantName, welcome_message: propWelcomeMessage, assistant_avatar: propAssistantAvatar }) {
+function isChatEnabled(config) {
+  return config !== null && config.is_enabled !== false;
+}
+function ChatWidget(props) {
+  const { projectId: propProjectId, apiUrl: propApiUrl } = props;
   const [resolvedProjectId, setResolvedProjectId] = useState(propProjectId || null);
   const projectId = propProjectId || resolvedProjectId || "";
+  const [widgetConfig, setWidgetConfig] = useState(null);
+  const baseUrl = propApiUrl || getApiConfig().apiUrl;
+  useEffect(() => {
+    if (propProjectId || resolvedProjectId) return;
+    const { apiKey } = getApiConfig();
+    if (!apiKey) return;
+    let cancelled = false;
+    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(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [propProjectId, resolvedProjectId, baseUrl]);
+  useEffect(() => {
+    if (!projectId) return;
+    const { apiKey } = getApiConfig();
+    if (!apiKey) {
+      console.warn("[ChatWidget] No site credential found. Render SiteKitLayout in app/layout.tsx and set SONOR_API_KEY on the server.");
+      return;
+    }
+    let cancelled = false;
+    sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
+      if (!cancelled) setWidgetConfig(json?.data ?? null);
+    }).catch((error) => {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("[ChatWidget] Config fetch failed:", error instanceof Error ? error.message : error);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, baseUrl]);
+  if (!isChatEnabled(widgetConfig)) return null;
+  return /* @__PURE__ */ jsx(EchoChat, { ...props, projectId, widgetConfig });
+}
+function EchoChat({ projectId, widgetConfig, config, apiUrl: propApiUrl, signalUrl: propSignalUrl, suggested_questions: propSuggestedQuestions, assistant_name: propAssistantName, welcome_message: propWelcomeMessage, assistant_avatar: propAssistantAvatar }) {
   const [isOpen, setIsOpen] = useState(false);
   const [messages, setMessages] = useState([]);
   const [inputValue, setInputValue] = useState("");
@@ -342,7 +479,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const [offlineForm, setOfflineForm] = useState({ name: "", email: "", phone: "", message: "" });
   const [offlineSubmitted, setOfflineSubmitted] = useState(false);
   const [connectionStatus, setConnectionStatus] = useState("disconnected");
-  const [widgetConfig, setWidgetConfig] = useState(null);
   const [handoffOfflinePrompt, setHandoffOfflinePrompt] = useState(null);
   const [pendingFiles, setPendingFiles] = useState([]);
   const [lastFailedSend, setLastFailedSend] = useState(null);
@@ -376,11 +512,19 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const primaryFallback = staticPrimaryColor(widgetConfig?.brand_primary || config?.buttonColor, "#2563eb");
   const [primaryFromCssVar, setPrimaryFromCssVar] = useState(null);
   const primaryColor = primaryFromCssVar ?? primaryFallback;
-  const primaryRgb = hexToRgbString(primaryColor);
+  const primaryRgb = rgbTriplet(primaryColor);
   useEffect(() => {
     const cssValue = getComputedStyle(document.documentElement).getPropertyValue("--sk-primary").trim();
     setPrimaryFromCssVar(cssValue || null);
   }, []);
+  const onBrand = onBrandColor(primaryColor);
+  const panelRef = useRef(null);
+  const [panelTint, setPanelTint] = useState(null);
+  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;
@@ -391,36 +535,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const offlineSubheading = handoffOfflinePrompt ?? widgetConfig?.offline_subheading ?? widgetConfig?.form_description ?? widgetConfig?.offline_message ?? config?.offlineMessage ?? "Leave us a message and we'll get back to you!";
   const baseUrl = propApiUrl || getApiConfig().apiUrl;
   const signalUrl = propSignalUrl || getApiConfig().signalUrl;
-  useEffect(() => {
-    if (propProjectId || resolvedProjectId) return;
-    const { apiKey } = getApiConfig();
-    if (!apiKey) return;
-    let cancelled = false;
-    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(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [propProjectId, resolvedProjectId, baseUrl]);
-  const fetchWidgetConfig = useCallback(async () => {
-    if (!projectId) return;
-    const apiKey = ensureApiKey();
-    if (!apiKey) return;
-    try {
-      const response = await sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 });
-      if (response.ok) {
-        const { data } = await response.json();
-        setWidgetConfig(data ?? null);
-      }
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("[ChatWidget] Config fetch failed:", error instanceof Error ? error.message : error);
-      }
-    }
-  }, [projectId, baseUrl]);
   const checkAvailability = useCallback(async () => {
     if (!projectId) return null;
     const apiKey = ensureApiKey();
@@ -525,22 +639,14 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     },
     [signalUrl, visitorId, fetchSiteContext]
   );
-  const pushEchoReply = useCallback(
-    (reply, probeContent) => {
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: `ai-${Date.now()}`,
-          role: "assistant",
-          content: reply.content,
-          timestamp: /* @__PURE__ */ new Date(),
-          ...reply.suggestions?.length ? { suggestions: reply.suggestions } : {},
-          ...reply.uiActions?.length ? { uiActions: reply.uiActions } : {},
-          ...reply.offerHandoff || userRequestedHandoff(probeContent) ? { offerHandoff: true } : {}
-        }
-      ]);
-    },
-    []
+  const sendTurnToEcho = useCallback(
+    (content, conversationId) => askEcho(content, {
+      send: (text) => sendToSignalApi(text, conversationId),
+      append: (message) => setMessages((prev) => [...prev, message]),
+      setLoading: setIsLoading,
+      onError: (err) => console.error("[ChatWidget] Signal API error:", err)
+    }),
+    [sendToSignalApi]
   );
   const handleSocketMessage = useCallback((data) => {
     switch (data.type || data.event) {
@@ -713,7 +819,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (isOpen && !showWelcome && inputRef.current) inputRef.current.focus();
   }, [isOpen, showWelcome]);
   useEffect(() => {
-    fetchWidgetConfig();
     checkAvailability();
     const interval = setInterval(checkAvailability, 6e4);
     return () => {
@@ -723,7 +828,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         socketRef.current = null;
       }
     };
-  }, [fetchWidgetConfig, checkAvailability]);
+  }, [checkAvailability]);
   useEffect(() => {
     if (isOpen && !showWelcome && !checkingAvailability && !showOfflineForm && !sessionId) {
       initSession().then(async (result) => {
@@ -733,58 +838,38 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         if (pending) {
           pendingInitialMessageRef.current = null;
         }
-        if (signalEnabled && pending) {
-          setIsLoading(true);
-          setMessages((prev) => [
-            ...prev,
-            { id: `u-${Date.now()}`, role: "user", content: pending, timestamp: /* @__PURE__ */ new Date() }
-          ]);
-          try {
-            const reply = await sendToSignalApi(pending, id);
-            pushEchoReply(reply, pending);
-          } catch (err) {
-            console.error("[ChatWidget] Signal API error:", err);
-            setMessages((prev) => [
-              ...prev,
-              {
-                id: `err-${Date.now()}`,
-                role: "assistant",
-                content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
-                timestamp: /* @__PURE__ */ new Date(),
-                suggestions: ["Talk to a person", "Try again"],
-                offerHandoff: true
-              }
-            ]);
-          } finally {
-            setIsLoading(false);
-          }
-        }
         if (!signalEnabled) {
           setConnectionStatus("connecting");
           await connectSocket(id);
         }
-        if (!signalEnabled && pending) {
-          const waitForSocket = () => new Promise((resolve) => {
-            const check = (attempts = 0) => {
-              if (socketRef.current?.connected || attempts > 20) {
-                resolve();
-                return;
+        if (pending) {
+          await deliverOpeningMessage(pending, {
+            signalEnabled,
+            ask: (content) => sendTurnToEcho(content, id),
+            emitLive: async (content) => {
+              const waitForSocket = () => new Promise((resolve) => {
+                const check = (attempts = 0) => {
+                  if (socketRef.current?.connected || attempts > 20) {
+                    resolve();
+                    return;
+                  }
+                  setTimeout(() => check(attempts + 1), 150);
+                };
+                check();
+              });
+              await waitForSocket();
+              if (socketRef.current?.connected) {
+                socketRef.current.emit("visitor:message", { content });
               }
-              setTimeout(() => check(attempts + 1), 150);
-            };
-            check();
+            }
           });
-          await waitForSocket();
-          if (socketRef.current?.connected) {
-            socketRef.current.emit("visitor:message", { content: pending });
-          }
         }
       });
     }
     return () => {
       if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
     };
-  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket, sendToSignalApi, pushEchoReply]);
+  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket, sendTurnToEcho]);
   const handleToggle = useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
@@ -792,11 +877,9 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     async (initialMessage) => {
       setShowWelcome(false);
       const beginChatSession = () => {
-        setMessages([{ id: "welcome", role: "assistant", content: welcomeMessage, timestamp: /* @__PURE__ */ new Date() }]);
+        setMessages(openingMessages(welcomeMessage, initialMessage));
         if (initialMessage) {
           pendingInitialMessageRef.current = initialMessage;
-          const userMsg = { id: `user-${Date.now()}`, role: "user", content: initialMessage, timestamp: /* @__PURE__ */ new Date() };
-          setMessages((prev) => [...prev, userMsg]);
           setIsLoading(true);
         }
       };
@@ -863,37 +946,12 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           return;
         }
       }
-      const userMessage = {
-        id: `user-${Date.now()}`,
-        role: "user",
-        content,
-        timestamp: /* @__PURE__ */ new Date(),
-        ...attachments.length ? { attachments } : {}
-      };
+      const userMessage = visitorMessage(content, attachments);
       setMessages((prev) => [...prev, userMessage]);
       setInputValue("");
       setIsLoading(true);
       if (widgetConfig?.signal_enabled && !isHandedOff && hasText) {
-        try {
-          const reply = await sendToSignalApi(content, sessionId);
-          const lastUserContent = messages.filter((m) => m.role === "user").slice(-1)[0]?.content ?? "";
-          pushEchoReply(reply, lastUserContent);
-        } catch (err) {
-          console.error("[ChatWidget] Signal API error:", err);
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: `err-${Date.now()}`,
-              role: "assistant",
-              content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
-              timestamp: /* @__PURE__ */ new Date(),
-              suggestions: ["Talk to a person", "Try again"],
-              offerHandoff: true
-            }
-          ]);
-        } finally {
-          setIsLoading(false);
-        }
+        await sendTurnToEcho(content, sessionId);
         return;
       }
       const socket = socketRef.current;
@@ -913,38 +971,16 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         }
       }, 3e3);
     },
-    [inputValue, isLoading, pendingFiles, uploadWidgetFile, widgetConfig?.signal_enabled, isHandedOff, sendToSignalApi, sessionId, pushEchoReply]
+    [inputValue, isLoading, pendingFiles, uploadWidgetFile, widgetConfig?.signal_enabled, isHandedOff, sendTurnToEcho, sessionId]
   );
   const sendEchoText = useCallback(
     async (text) => {
       const content = text.trim();
       if (!content || isLoading) return;
-      setMessages((prev) => [
-        ...prev,
-        { id: `user-${Date.now()}`, role: "user", content, timestamp: /* @__PURE__ */ new Date() }
-      ]);
-      setIsLoading(true);
-      try {
-        const reply = await sendToSignalApi(content, sessionId);
-        pushEchoReply(reply, content);
-      } catch (err) {
-        console.error("[ChatWidget] Signal API error:", err);
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `err-${Date.now()}`,
-            role: "assistant",
-            content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
-            timestamp: /* @__PURE__ */ new Date(),
-            suggestions: ["Talk to a person", "Try again"],
-            offerHandoff: true
-          }
-        ]);
-      } finally {
-        setIsLoading(false);
-      }
+      setMessages((prev) => [...prev, visitorMessage(content)]);
+      await sendTurnToEcho(content, sessionId);
     },
-    [isLoading, sessionId, sendToSignalApi, pushEchoReply]
+    [isLoading, sessionId, sendTurnToEcho]
   );
   const handleSuggestAction = useCallback(
     (action, message) => {
@@ -1066,7 +1102,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__ */ jsx(
     "button",
     {
@@ -1095,10 +1130,10 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       onMouseLeave: (e) => {
         e.currentTarget.style.transform = "scale(1)";
       },
-      children: isOpen ? /* @__PURE__ */ 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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) : /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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__ */ jsxs(
@@ -1122,7 +1157,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",
@@ -1159,7 +1194,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",
@@ -1188,7 +1223,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",
@@ -1200,11 +1235,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "var(--sk-text-secondary, #6b7280)" }, children: [
       "Or call us at",
       " ",
-      /* @__PURE__ */ jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: primaryColor, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
+      /* @__PURE__ */ jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: brandText, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
     ] })
   ] });
   const OfflineFormView = /* @__PURE__ */ jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
-    /* @__PURE__ */ 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__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    /* @__PURE__ */ 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__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: brandText, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
     /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "var(--sk-text-primary, #111827)" }, children: "Message Sent!" }),
     /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading })
   ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleOfflineSubmit, children: [
@@ -1251,7 +1286,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",
@@ -1299,7 +1334,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ 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__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
             /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
             /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
             /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
@@ -1348,7 +1383,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,
@@ -1384,7 +1419,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",
@@ -1430,7 +1465,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"
                       },
@@ -1444,6 +1479,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                       actions: message.uiActions,
                       primaryColor,
                       primaryRgb,
+                      brandText,
                       onSuggest: handleSuggestAction
                     }
                   ) : null,
@@ -1467,7 +1503,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"
                       },
@@ -1549,7 +1585,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",
@@ -1565,6 +1601,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const ChatPopup = isOpen && /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: panelRef,
       "data-sk-echo-panel": true,
       className: "sk-glass sk-glass--panel",
       style: {
@@ -1627,6 +1664,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   ] });
 }
 
-export { ChatWidget };
-//# sourceMappingURL=chunk-3SHAY7PK.mjs.map
-//# sourceMappingURL=chunk-3SHAY7PK.mjs.map
+export { ChatWidget, EchoChat, isChatEnabled };
+//# sourceMappingURL=chunk-22WIVF4O.mjs.map
+//# sourceMappingURL=chunk-22WIVF4O.mjs.map