@sonordev/site-kit 6.1.1 → 6.2.0

package/dist/{chunk-QYRJ4IQD.js → chunk-NJVU2DCX.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 chunkA4WTX36Y_js = require('./chunk-A4WTX36Y.js');
+var chunkM2N7NY3V_js = require('./chunk-M2N7NY3V.js');
+var chunk3NDDCSWR_js = require('./chunk-3NDDCSWR.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 || {} });
+  } = chunkA4WTX36Y_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}`
@@ -269,6 +323,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";
@@ -291,19 +410,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";
@@ -315,27 +421,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] = react.useState(propProjectId || null);
   const projectId = propProjectId || resolvedProjectId || "";
+  const [widgetConfig, setWidgetConfig] = react.useState(null);
+  const baseUrl = propApiUrl || getApiConfig().apiUrl;
+  react.useEffect(() => {
+    if (propProjectId || resolvedProjectId) return;
+    const { apiKey } = getApiConfig();
+    if (!apiKey) return;
+    let cancelled = false;
+    chunk3NDDCSWR_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(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [propProjectId, resolvedProjectId, baseUrl]);
+  react.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;
+    chunk3NDDCSWR_js.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__ */ jsxRuntime.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] = react.useState(false);
   const [messages, setMessages] = react.useState([]);
   const [inputValue, setInputValue] = react.useState("");
@@ -348,7 +485,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const [offlineForm, setOfflineForm] = react.useState({ name: "", email: "", phone: "", message: "" });
   const [offlineSubmitted, setOfflineSubmitted] = react.useState(false);
   const [connectionStatus, setConnectionStatus] = react.useState("disconnected");
-  const [widgetConfig, setWidgetConfig] = react.useState(null);
   const [handoffOfflinePrompt, setHandoffOfflinePrompt] = react.useState(null);
   const [pendingFiles, setPendingFiles] = react.useState([]);
   const [lastFailedSend, setLastFailedSend] = react.useState(null);
@@ -382,11 +518,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;
@@ -397,42 +541,12 @@ 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;
-  react.useEffect(() => {
-    if (propProjectId || resolvedProjectId) return;
-    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) => {
-      if (cancelled || !data?.valid || !data?.project_id) return;
-      setResolvedProjectId(data.project_id);
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [propProjectId, resolvedProjectId, baseUrl]);
-  const fetchWidgetConfig = react.useCallback(async () => {
-    if (!projectId) return;
-    const apiKey = ensureApiKey();
-    if (!apiKey) return;
-    try {
-      const response = await chunkVNJTU6LG_js.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 = react.useCallback(async () => {
     if (!projectId) return null;
     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 chunk3NDDCSWR_js.sonorFetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {}, { apiKey, retries: 0 });
       if (response.ok) {
         const { data } = await response.json();
         setAvailability(data);
@@ -449,7 +563,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 chunk3NDDCSWR_js.sonorFetch(`${baseUrl}/engage/widget/session`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -510,7 +624,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 chunk3NDDCSWR_js.sonorFetch(url, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -531,22 +645,14 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     },
     [signalUrl, visitorId, fetchSiteContext]
   );
-  const pushEchoReply = react.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 = react.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 = react.useCallback((data) => {
     switch (data.type || data.event) {
@@ -621,7 +727,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) => {
+            chunk3NDDCSWR_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 +790,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 chunk3NDDCSWR_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 });
           if (response.ok) {
             const { data } = await response.json();
             setMessages((prev) => {
@@ -719,7 +825,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (isOpen && !showWelcome && inputRef.current) inputRef.current.focus();
   }, [isOpen, showWelcome]);
   react.useEffect(() => {
-    fetchWidgetConfig();
     checkAvailability();
     const interval = setInterval(checkAvailability, 6e4);
     return () => {
@@ -729,7 +834,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         socketRef.current = null;
       }
     };
-  }, [fetchWidgetConfig, checkAvailability]);
+  }, [checkAvailability]);
   react.useEffect(() => {
     if (isOpen && !showWelcome && !checkingAvailability && !showOfflineForm && !sessionId) {
       initSession().then(async (result) => {
@@ -739,58 +844,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 = react.useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
@@ -798,11 +883,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);
         }
       };
@@ -837,7 +920,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 chunk3NDDCSWR_js.sonorFetch(`${baseUrl}/engage/widget/upload`, {
         method: "POST",
         body: form
       }, { apiKey, retries: 0 });
@@ -869,37 +952,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;
@@ -919,38 +977,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 = react.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 = react.useCallback(
     (action, message) => {
@@ -984,7 +1020,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 chunk3NDDCSWR_js.sonorFetch(`${baseUrl}/engage/widget/handoff`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ sessionId })
@@ -1023,7 +1059,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 chunk3NDDCSWR_js.sonorFetch(`${baseUrl}/engage/widget/offline-form`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -1072,7 +1108,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 +1136,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 +1163,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 +1200,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 +1229,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 +1241,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 +1292,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 +1340,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 +1389,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 +1425,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 +1471,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 +1485,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                       actions: message.uiActions,
                       primaryColor,
                       primaryRgb,
+                      brandText,
                       onSuggest: handleSuggestAction
                     }
                   ) : null,
@@ -1473,7 +1509,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 +1591,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 +1607,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 +1671,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
 }
 
 exports.ChatWidget = ChatWidget;
-//# sourceMappingURL=chunk-QYRJ4IQD.js.map
-//# sourceMappingURL=chunk-QYRJ4IQD.js.map
+exports.EchoChat = EchoChat;
+exports.isChatEnabled = isChatEnabled;
+//# sourceMappingURL=chunk-NJVU2DCX.js.map
+//# sourceMappingURL=chunk-NJVU2DCX.js.map