@wallavi/widget 1.12.7 → 1.13.1

package/dist/index.js

@@ -92,6 +92,83 @@ async function getFreshClerkToken() {
   }
 }
 
+// src/lib/page-context.ts
+function candidatesFrom(actions) {
+  const out = [];
+  for (const action of actions) {
+    const title = action.displayName ?? action.name;
+    const target = action.steps?.find((s) => s.action === "navigate")?.value;
+    if (!title || typeof target !== "string" || !target.startsWith("/")) {
+      continue;
+    }
+    const [path = "", search = ""] = target.split("?");
+    out.push({
+      title,
+      segments: path.split("/").filter(Boolean),
+      query: new URLSearchParams(search)
+    });
+  }
+  return out;
+}
+var PARAM = /^\[(\w+)\]$/;
+var LOCALE = /^[a-z]{2}(?:-[a-z]{2,4})?$/i;
+function offsetsFor(pathSegments, routeLength) {
+  const offsets = [];
+  if (pathSegments.length === routeLength) offsets.push(0);
+  if (pathSegments.length === routeLength + 1 && LOCALE.test(pathSegments[0] ?? "")) {
+    offsets.push(1);
+  }
+  return offsets;
+}
+function safeDecode(segment) {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return null;
+  }
+}
+function score(candidate, pathSegments, search) {
+  const { segments, query } = candidate;
+  if (segments.length === 0) return null;
+  for (const [key, value] of query) {
+    if (search.get(key) !== value) return null;
+  }
+  for (const offset of offsetsFor(pathSegments, segments.length)) {
+    const params = {};
+    let points = Array.from(query.keys()).length;
+    let matched = true;
+    for (let i = 0; i < segments.length && matched; i++) {
+      const pattern = segments[i];
+      const actual = safeDecode(pathSegments[offset + i]);
+      const param = PARAM.exec(pattern);
+      if (actual === null) matched = false;
+      else if (param) params[param[1]] = actual;
+      else if (pattern === actual) points += 2;
+      else matched = false;
+    }
+    if (matched) return { score: points, params };
+  }
+  return null;
+}
+function derivePageContext(location, actions) {
+  if (!actions?.length) return void 0;
+  const pathSegments = location.pathname.split("/").filter(Boolean);
+  const search = new URLSearchParams(location.search);
+  let best = null;
+  for (const candidate of candidatesFrom(actions)) {
+    const result = score(candidate, pathSegments, search);
+    if (result && (!best || result.score > best.score)) {
+      best = { title: candidate.title, ...result };
+    }
+  }
+  if (!best) return void 0;
+  return {
+    url: `${location.pathname}${location.search}`,
+    title: best.title,
+    ...Object.keys(best.params).length > 0 ? { params: best.params } : {}
+  };
+}
+
 // src/lib/types.ts
 function getContrastColor(hex) {
   const clean = hex.replace("#", "");
@@ -105,7 +182,7 @@ function formatToolName(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim();
 }
 
-// src/core/stream-protocol.ts
+// ../protocol/src/index.ts
 var STREAM_DELIMITER = "\u03B6\u236E";
 async function consumeStream(body, handler) {
   const reader = body.getReader();
@@ -121,9 +198,9 @@ async function consumeStream(body, handler) {
       if (!raw) continue;
       try {
         const parsed = JSON.parse(raw);
-        const proto = parsed.data?.uiMessageProtocol;
-        if (proto) {
+        if (parsed.data?.uiMessageProtocol) {
           eventCount++;
+          const proto = parsed.data.uiMessageProtocol;
           if (proto.type === "text-delta") {
             textAccumulator += proto.delta ?? "";
           }
@@ -273,12 +350,321 @@ function applyUiEventToMessages(prev, proto, msgId) {
   copy[idx] = msg;
   return copy;
 }
-var API_URL = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
+
+// src/core/declarative-actions.ts
+function sanitizeSelector(selector) {
+  if (!selector || typeof selector !== "string") return null;
+  const lower = selector.toLowerCase();
+  if (lower.includes("<") || lower.includes(">") || lower.includes("script") || lower.includes("iframe") || lower.includes("onload") || lower.includes("onerror") || lower.includes("javascript:")) {
+    return null;
+  }
+  const cleanRegex = /^[a-zA-Z0-9\s\.\-#_\[\]="':]+$/;
+  if (!cleanRegex.test(selector)) {
+    return null;
+  }
+  return selector;
+}
+function sanitizeEventName(name) {
+  if (!name || typeof name !== "string") return null;
+  const nameRegex = /^[a-zA-Z0-9\-_:]+$/;
+  if (!nameRegex.test(name)) return null;
+  const nativeEvents = /* @__PURE__ */ new Set([
+    "click",
+    "dblclick",
+    "mouseup",
+    "mousedown",
+    "mouseover",
+    "mouseout",
+    "submit",
+    "reset",
+    "change",
+    "select",
+    "keydown",
+    "keypress",
+    "keyup",
+    "load",
+    "unload",
+    "abort",
+    "error",
+    "resize",
+    "scroll",
+    "contextmenu"
+  ]);
+  if (nativeEvents.has(name.toLowerCase())) return null;
+  return name;
+}
+function sanitizeUrl(url) {
+  if (!url || typeof url !== "string") return null;
+  const trimmed = url.trim();
+  const lower = trimmed.toLowerCase();
+  if (trimmed.startsWith("//")) {
+    return null;
+  }
+  if (lower.startsWith("javascript:") || lower.startsWith("data:")) {
+    return null;
+  }
+  if (trimmed.startsWith("/")) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    return trimmed;
+  }
+  return null;
+}
+async function waitForElement(selector, retries = 5, delayMs = 100) {
+  const cleanId = selector.startsWith("#") ? selector.substring(1) : selector;
+  for (let i = 0; i < retries; i++) {
+    try {
+      const el = document.querySelector(selector);
+      if (el) return el;
+    } catch (e) {
+      console.error(e);
+    }
+    try {
+      const byId = document.getElementById(cleanId);
+      if (byId) return byId;
+    } catch (e) {
+      console.error(e);
+    }
+    if (!selector.startsWith("#") && !selector.startsWith(".") && !selector.startsWith("[")) {
+      try {
+        const byPrependedId = document.querySelector(`#${selector}`);
+        if (byPrependedId) return byPrependedId;
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    await new Promise((resolve) => setTimeout(resolve, delayMs));
+  }
+  return null;
+}
+var HEX_COLOR_REGEX = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
+function sanitizeColor(color, fallback = "#6366f1") {
+  if (!color || typeof color !== "string") return fallback;
+  const trimmed = color.trim();
+  return HEX_COLOR_REGEX.test(trimmed) ? trimmed : fallback;
+}
+function injectCopilotStyles(color = "#6366f1") {
+  if (typeof document === "undefined") return;
+  const safeColor = sanitizeColor(color, "#6366f1");
+  let style = document.getElementById(
+    "wallavi-copilot-styles"
+  );
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "wallavi-copilot-styles";
+    document.head.appendChild(style);
+  }
+  if (style.dataset.color === safeColor) return;
+  style.dataset.color = safeColor;
+  style.textContent = `
+    @keyframes wallavi-pulse-beacon {
+      0% {
+        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
+        outline: 2px solid ${safeColor};
+      }
+      70% {
+        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
+        outline: 2px solid rgba(99, 102, 241, 0.3);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+        outline: 2px solid transparent;
+      }
+    }
+    .wallavi-element-beacon {
+      animation: wallavi-pulse-beacon 1.8s ease-out infinite !important;
+      outline-offset: 3px !important;
+      border-radius: inherit;
+      transition: outline 0.2s ease, box-shadow 0.2s ease !important;
+    }
+    @keyframes wallavi-flash-touch-anim {
+      0% {
+        outline: 3px solid ${safeColor};
+        outline-offset: 2px;
+        filter: brightness(1.08);
+      }
+      100% {
+        outline: 2px solid transparent;
+        outline-offset: 6px;
+        filter: none;
+      }
+    }
+    .wallavi-flash-touch {
+      animation: wallavi-flash-touch-anim 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function flashElement(el, color) {
+  injectCopilotStyles(color);
+  el.classList.remove("wallavi-flash-touch");
+  void el.offsetWidth;
+  el.classList.add("wallavi-flash-touch");
+  setTimeout(() => {
+    el.classList.remove("wallavi-flash-touch");
+  }, 600);
+}
+function highlightElement(el, color, durationMs = 3e3) {
+  injectCopilotStyles(color);
+  el.classList.add("wallavi-element-beacon");
+  setTimeout(() => {
+    el.classList.remove("wallavi-element-beacon");
+  }, durationMs);
+}
+var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+async function executeDeclarativeSteps(steps, onNavigate, copilotColor) {
+  if (typeof window === "undefined" || !Array.isArray(steps)) return;
+  const safeCopilotColor = sanitizeColor(copilotColor, "#6366f1");
+  for (const step of steps) {
+    try {
+      const { action } = step;
+      switch (action) {
+        case "scroll_to":
+        case "scroll_into_view": {
+          const selector = sanitizeSelector(step.selector);
+          if (!selector) break;
+          const el = await waitForElement(selector);
+          if (el) {
+            flashElement(el, safeCopilotColor);
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+          break;
+        }
+        case "click": {
+          const selector = sanitizeSelector(step.selector);
+          if (!selector) break;
+          const el = await waitForElement(selector);
+          if (el) {
+            flashElement(el, safeCopilotColor);
+            await delay(80);
+            el.click();
+          }
+          break;
+        }
+        case "focus": {
+          const selector = sanitizeSelector(step.selector);
+          if (!selector) break;
+          const el = await waitForElement(selector);
+          if (el) {
+            flashElement(el, safeCopilotColor);
+            el.focus();
+          }
+          break;
+        }
+        case "highlight": {
+          const selector = sanitizeSelector(step.selector);
+          if (!selector) break;
+          const el = await waitForElement(selector);
+          if (el) {
+            highlightElement(
+              el,
+              sanitizeColor(step.color, safeCopilotColor),
+              step.durationMs ?? 3e3
+            );
+          }
+          break;
+        }
+        case "wait": {
+          const parsedVal = typeof step.value === "number" ? step.value : parseInt(String(step.value ?? "500"), 10);
+          const ms = step.delayMs ?? (Number.isNaN(parsedVal) ? 500 : parsedVal);
+          await delay(ms);
+          break;
+        }
+        case "add_class": {
+          const selector = sanitizeSelector(step.selector);
+          const value = step.value;
+          if (!selector || !value) break;
+          const el = await waitForElement(selector);
+          if (el) el.classList.add(...value.split(/\s+/).filter(Boolean));
+          break;
+        }
+        case "remove_class": {
+          const selector = sanitizeSelector(step.selector);
+          const value = step.value;
+          if (!selector || !value) break;
+          const el = await waitForElement(selector);
+          if (el) el.classList.remove(...value.split(/\s+/).filter(Boolean));
+          break;
+        }
+        case "fill_value": {
+          const selector = sanitizeSelector(step.selector);
+          const value = step.value;
+          if (!selector) break;
+          const el = await waitForElement(selector);
+          if (el && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
+            if (el instanceof HTMLInputElement) {
+              const type = el.type.toLowerCase();
+              if (type === "password" || type === "hidden") {
+                console.warn(
+                  `[Wallavi Widget] Blocked fill_value action on sensitive field: ${type}`
+                );
+                break;
+              }
+            }
+            const isReadOnly = (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) && el.readOnly;
+            if (el.disabled || isReadOnly) {
+              console.warn(
+                "[Wallavi Widget] Blocked fill_value action on disabled/readOnly element"
+              );
+              break;
+            }
+            flashElement(el, safeCopilotColor);
+            el.value = value ?? "";
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          break;
+        }
+        case "dispatch_event": {
+          const eventName = sanitizeEventName(step.value);
+          if (!eventName) break;
+          const detail = step.payload ?? {};
+          window.dispatchEvent(new CustomEvent(eventName, { detail }));
+          break;
+        }
+        case "navigate": {
+          const url = sanitizeUrl(step.value);
+          if (url) {
+            if (onNavigate) {
+              onNavigate(url);
+            } else {
+              window.location.href = url;
+            }
+          }
+          break;
+        }
+        default: {
+          const unknownAction = step.action;
+          console.warn(
+            `[Wallavi Widget] Unknown declarative action: ${unknownAction}`
+          );
+        }
+      }
+      await delay(120);
+    } catch (err) {
+      console.error(
+        "[Wallavi Widget] Failed to execute declarative step:",
+        step,
+        err
+      );
+    }
+  }
+}
+
+// src/lib/api-url.ts
+var WALLAVI_PRODUCTION_API_URL = "https://wallavi-production.up.railway.app";
+function resolveApiUrl(explicit) {
+  return explicit ?? process.env.NEXT_PUBLIC_API_URL ?? WALLAVI_PRODUCTION_API_URL;
+}
+
+// src/hooks/use-voice-call.ts
 function useVoiceCall({
   agentId,
   threadId,
   workspaceId,
-  customBackend
+  customBackend,
+  apiUrl
 }) {
   const [active, setActive] = react.useState(false);
   const [token, setToken] = react.useState(null);
@@ -291,7 +677,7 @@ function useVoiceCall({
     setError(null);
     try {
       const isPrivate = Boolean(workspaceId);
-      const url = isPrivate ? `${API_URL}/api/threads/${threadId}/livekit-token?agentId=${encodeURIComponent(agentId)}` : `${API_URL}/api/chat/livekit-token?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`;
+      const url = isPrivate ? `${resolveApiUrl(apiUrl)}/api/threads/${threadId}/livekit-token?agentId=${encodeURIComponent(agentId)}` : `${resolveApiUrl(apiUrl)}/api/chat/livekit-token?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`;
       const token2 = isPrivate ? await getFreshClerkToken() : null;
       const res = await fetch(url, {
         headers: {
@@ -307,7 +693,7 @@ function useVoiceCall({
       setError(err.message);
     }
     setLoading(false);
-  }, [agentId, threadId, workspaceId, customBackend]);
+  }, [agentId, threadId, workspaceId, customBackend, apiUrl]);
   const stop = react.useCallback(() => {
     setActive(false);
     setToken(null);
@@ -324,13 +710,33 @@ function useVoiceCall({
   };
 }
 
+// src/lib/user-headers.ts
+var warnedHeadersFailure = false;
+async function resolveUserHeaders(userContext) {
+  const source = userContext?.headers;
+  if (!source) return {};
+  if (typeof source !== "function") return source;
+  try {
+    return await source() ?? {};
+  } catch (err) {
+    if (!warnedHeadersFailure) {
+      warnedHeadersFailure = true;
+      console.warn(
+        "[wallavi-widget] userContext.headers threw; sending without host headers",
+        err
+      );
+    }
+    return {};
+  }
+}
+
 // src/hooks/use-chat.ts
-var API_URL2 = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
 function newId() {
   return Math.random().toString(36).slice(2, 10);
 }
 function useChat({
   agentId,
+  apiUrl,
   workspaceId = "",
   envId,
   source = "playground",
@@ -338,13 +744,20 @@ function useChat({
   persist = false,
   onNavigate,
   playgroundOverrides,
-  customBackend
+  customBackend,
+  copilotColor,
+  resolvePageContext
 }) {
+  const baseUrl = resolveApiUrl(apiUrl);
   const userId = userContext?.userId;
   const persistKey = persist ? userId ? `wallavi_${agentId}_${userId}` : `wallavi_${agentId}` : null;
   const onNavigateRef = react.useRef(onNavigate);
+  const resolvePageContextRef = react.useRef(resolvePageContext);
+  const copilotColorRef = react.useRef(copilotColor);
   react.useEffect(() => {
     onNavigateRef.current = onNavigate;
+    resolvePageContextRef.current = resolvePageContext;
+    copilotColorRef.current = copilotColor;
   });
   const [messages, setMessages] = react.useState(() => {
     if (!persistKey || typeof window === "undefined") return [];
@@ -438,7 +851,11 @@ function useChat({
         return;
       }
       if (proto.type === "client-action") {
-        executeDeclarativeSteps(proto.steps, onNavigateRef.current);
+        executeDeclarativeSteps(
+          proto.steps,
+          onNavigateRef.current,
+          copilotColorRef.current
+        );
         return;
       }
       if (proto.type === "debug-trace") {
@@ -454,10 +871,18 @@ function useChat({
   );
   const fetchAndStream = react.useCallback(
     async (opts) => {
-      const { input: userInput, msgId, extraMetadata, attachments } = opts;
+      const {
+        input: userInput,
+        msgId,
+        extraMetadata,
+        attachments,
+        pickerSelection
+      } = opts;
       const isPrivate = Boolean(workspaceId);
       const token = isPrivate ? await getFreshClerkToken() : null;
-      const url = isPrivate ? `${API_URL2}/api/threads/${threadId}/stream` : `${API_URL2}/api/chat/stream`;
+      const hostHeaders = await resolveUserHeaders(userContext);
+      const pageContext = userContext?.pageContext ?? resolvePageContextRef.current?.();
+      const url = isPrivate ? `${baseUrl}/api/threads/${threadId}/stream` : `${baseUrl}/api/chat/stream`;
       const res = await fetch(url, {
         method: "POST",
         headers: {
@@ -474,14 +899,17 @@ function useChat({
           } : { threadId },
           source,
           ...attachments?.length ? { attachments } : {},
+          // Its own field: userMetadata keys starting with __ belong to the
+          // engine and the API rejects them.
+          ...pickerSelection ? { pickerSelection } : {},
           ...userContext?.userName ? { userName: userContext.userName } : {},
           ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
           userMetadata: {
             ...userContext?.metadata ?? {},
-            ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
+            ...pageContext ? { pageContext } : {},
             headers: {
               ...token ? { Authorization: `Bearer ${token}` } : {},
-              ...userContext?.headers ?? {},
+              ...hostHeaders,
               ...userContext?.metadata?.headers ?? {}
             },
             ...extraMetadata ?? {}
@@ -526,6 +954,7 @@ function useChat({
       }
     },
     [
+      baseUrl,
       agentId,
       workspaceId,
       envId,
@@ -540,7 +969,8 @@ function useChat({
     agentId,
     threadId,
     workspaceId,
-    customBackend
+    customBackend,
+    apiUrl: baseUrl
   });
   react.useEffect(() => {
     if (customBackend || !persistKey) return;
@@ -589,7 +1019,7 @@ function useChat({
         try {
           const isPrivate = Boolean(workspaceId);
           const token = isPrivate ? await getFreshClerkToken() : null;
-          const url = isPrivate ? `${API_URL2}/api/threads/${threadId}/messages` : `${API_URL2}/api/chat/messages?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`;
+          const url = isPrivate ? `${baseUrl}/api/threads/${threadId}/messages` : `${baseUrl}/api/chat/messages?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`;
           const res = await fetch(url, {
             headers: {
               ...token ? { Authorization: `Bearer ${token}` } : {}
@@ -653,7 +1083,15 @@ function useChat({
         }
       }
     }
-  }, [threadId, agentId, workspaceId, envId, persistKey, fetchAndStream]);
+  }, [
+    baseUrl,
+    threadId,
+    agentId,
+    workspaceId,
+    envId,
+    persistKey,
+    fetchAndStream
+  ]);
   const reset = react.useCallback(() => {
     setMessages([]);
     setInput("");
@@ -776,9 +1214,7 @@ function useChat({
         await fetchAndStream({
           input: label,
           msgId: assistantMsgId,
-          extraMetadata: {
-            __pickerSelection: { pickerId, paramName, value, label }
-          }
+          pickerSelection: { pickerId, paramName, value, label }
         });
       } catch {
         setMessages((prev) => {
@@ -837,106 +1273,6 @@ function useChat({
     setSelectedContext
   };
 }
-async function waitForElement(selector, retries = 5, delayMs = 100) {
-  const cleanId = selector.startsWith("#") ? selector.substring(1) : selector;
-  for (let i = 0; i < retries; i++) {
-    try {
-      const el = document.querySelector(selector);
-      if (el) return el;
-    } catch (e) {
-    }
-    try {
-      const byId = document.getElementById(cleanId);
-      if (byId) return byId;
-    } catch (e) {
-    }
-    if (!selector.startsWith("#") && !selector.startsWith(".") && !selector.startsWith("[")) {
-      try {
-        const byPrependedId = document.querySelector(`#${selector}`);
-        if (byPrependedId) return byPrependedId;
-      } catch (e) {
-      }
-    }
-    await new Promise((resolve) => setTimeout(resolve, delayMs));
-  }
-  return null;
-}
-async function executeDeclarativeSteps(steps, onNavigate) {
-  if (typeof window === "undefined" || !Array.isArray(steps)) return;
-  for (const step of steps) {
-    try {
-      const { action, selector, value, payload } = step;
-      switch (action) {
-        case "scroll_into_view": {
-          if (!selector) break;
-          const el = await waitForElement(selector);
-          el?.scrollIntoView({ behavior: "smooth", block: "center" });
-          break;
-        }
-        case "click": {
-          if (!selector) break;
-          const el = await waitForElement(selector);
-          el?.click();
-          break;
-        }
-        case "focus": {
-          if (!selector) break;
-          const el = await waitForElement(selector);
-          el?.focus();
-          break;
-        }
-        case "add_class": {
-          if (!selector || !value) break;
-          const el = await waitForElement(selector);
-          if (el) el.classList.add(...value.split(/\s+/).filter(Boolean));
-          break;
-        }
-        case "remove_class": {
-          if (!selector || !value) break;
-          const el = await waitForElement(selector);
-          if (el) el.classList.remove(...value.split(/\s+/).filter(Boolean));
-          break;
-        }
-        case "fill_value": {
-          if (!selector) break;
-          const el = await waitForElement(selector);
-          if (el) {
-            el.value = value ?? "";
-            el.dispatchEvent(new Event("input", { bubbles: true }));
-            el.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-          break;
-        }
-        case "dispatch_event": {
-          if (!value) break;
-          const detail = payload ?? {};
-          window.dispatchEvent(new CustomEvent(value, { detail }));
-          break;
-        }
-        case "navigate": {
-          if (value) {
-            if (onNavigate) {
-              onNavigate(value);
-            } else {
-              window.location.href = value;
-            }
-          }
-          break;
-        }
-        default:
-          console.warn(
-            `[Wallavi Widget] Unknown declarative action: ${action}`
-          );
-      }
-    } catch (err) {
-      console.error(
-        "[Wallavi Widget] Failed to execute declarative step:",
-        step,
-        err
-      );
-    }
-  }
-}
 function getPreferredMimeType() {
   if (typeof MediaRecorder === "undefined") return "";
   const candidates = [
@@ -953,7 +1289,6 @@ function mimeTypeToExtension(mimeType) {
   if (mimeType.includes("mp4")) return "mp4";
   return "webm";
 }
-var DEFAULT_API_URL = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
 function useVoice({
   agentId,
   apiUrl,
@@ -966,7 +1301,7 @@ function useVoice({
   const streamRef = react.useRef(null);
   const errorTimerRef = react.useRef(null);
   const isSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined" && !!navigator?.mediaDevices?.getUserMedia;
-  const base = apiUrl ?? DEFAULT_API_URL;
+  const base = resolveApiUrl(apiUrl);
   const transcribeBlob = react.useCallback(
     async (blob, mimeType) => {
       setVoiceState("transcribing");
@@ -1045,7 +1380,6 @@ function useVoice({
   }, []);
   return { voiceState, isSupported, start, stop };
 }
-var DEFAULT_API_URL2 = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
 function makeId() {
   return `att_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
 }
@@ -1055,7 +1389,7 @@ function useAttachments({
   maxFiles = 5
 }) {
   const [attachments, setAttachments] = react.useState([]);
-  const base = apiUrl ?? DEFAULT_API_URL2;
+  const base = resolveApiUrl(apiUrl);
   const uploadOne = react.useCallback(
     async (file, id) => {
       const form = new FormData();
@@ -2850,6 +3184,20 @@ function VoiceOverlay({
     }
   ) });
 }
+
+// src/lib/unique-keys.ts
+function uniqueKeys(items, baseKey) {
+  const seen = /* @__PURE__ */ new Map();
+  return items.map((item) => {
+    const base = baseKey(item);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return count === 0 ? base : `${base}#${count}`;
+  });
+}
+var actionKey = (action) => `${action.name}:${JSON.stringify(action.steps ?? [])}`;
+var docKey = (doc) => `${doc.name}:${doc.url ?? ""}`;
+var topicKey = (topic) => topic.name;
 function SvgIcon({
   className,
   strokeWidth = "1.8",
@@ -2923,11 +3271,11 @@ function urlRelevance(docUrl, pageUrl) {
     return 50;
   const docParts = docClean.split(/[/?#]/).filter(Boolean);
   const pageParts = pageClean.split(/[/?#]/).filter(Boolean);
-  let score = 0;
+  let score2 = 0;
   for (const part of pageParts) {
-    if (docParts.includes(part)) score += 10;
+    if (docParts.includes(part)) score2 += 10;
   }
-  return score;
+  return score2;
 }
 function topicToQuestion(topic, locale) {
   const name = topic.name.trim();
@@ -3018,9 +3366,9 @@ function getContextKeywords(pageUrl, pageTitle, pageParams, pageVars, metadata)
   return Array.from(keywords);
 }
 function computeRelevanceScore(item, keywords, pageUrl) {
-  let score = 0;
+  let score2 = 0;
   if (item.url && pageUrl) {
-    score += urlRelevance(item.url, pageUrl);
+    score2 += urlRelevance(item.url, pageUrl);
   }
   const itemName = (item.name || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
   const itemDesc = (item.description || item.summary || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -3028,33 +3376,41 @@ function computeRelevanceScore(item, keywords, pageUrl) {
   const nameWords = itemName.split(/[^a-z0-9]/).filter(Boolean);
   for (const keyword of keywords) {
     if (itemName.includes(keyword)) {
-      score += 30;
+      score2 += 30;
       if (nameWords.includes(keyword)) {
-        score += 20;
+        score2 += 20;
       }
     }
     if (itemDesc.includes(keyword)) {
-      score += 15;
+      score2 += 15;
     }
     if (itemUrl.includes(keyword)) {
-      score += 20;
+      score2 += 20;
     }
   }
-  if (item.keywords) {
-    const allItemKeywords = [
-      ...item.keywords.en || [],
-      ...item.keywords.es || [],
-      ...item.keywords.fr || []
-    ].map(
+  if (item.keywords && typeof item.keywords === "object") {
+    const rawList = [];
+    if (Array.isArray(item.keywords)) {
+      rawList.push(...item.keywords);
+    } else {
+      const kwRecord = item.keywords;
+      for (const lang of ["en", "es", "fr"]) {
+        const langVal = kwRecord[lang];
+        if (Array.isArray(langVal)) {
+          rawList.push(...langVal);
+        }
+      }
+    }
+    const allItemKeywords = rawList.filter((k) => typeof k === "string" && k.trim().length > 0).map(
       (k) => k.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
     );
     for (const keyword of keywords) {
       if (allItemKeywords.includes(keyword)) {
-        score += 45;
+        score2 += 45;
       }
     }
   }
-  return score;
+  return score2;
 }
 var STAGGER_MS = 50;
 var cardBase = "ww-group ww-w-full ww-rounded-xl ww-border ww-border-border ww-bg-background ww-text-left ww-shadow-[0_1px_2px_rgba(0,0,0,0.03)] hover:ww-bg-muted/20 hover:ww-border-border/80 hover:ww-shadow-md active:ww-scale-[0.98] ww-transition-all ww-duration-200 ww-animate-in ww-fade-in ww-slide-in-from-bottom-1 focus-visible:ww-ring-2 focus-visible:ww-ring-ring/40 focus-visible:ww-outline-none";
@@ -3267,6 +3623,9 @@ function CommandPanel({
     }));
     return scored.sort((a, b) => b.score - a.score);
   }, [clientActions, pageUrl, pageTitle, pageParams, pageVars, metadata]);
+  const actionKeys = uniqueKeys(sortedActions, actionKey);
+  const docKeys = uniqueKeys(relevantDocs, docKey);
+  const topicKeys = uniqueKeys(topicQuestions, topicKey);
   const hasActions = sortedActions.length > 0;
   const hasDocs = relevantDocs.length > 0;
   const hasTopics = topicQuestions.length > 0;
@@ -3288,7 +3647,7 @@ function CommandPanel({
               accentColor,
               onExecute: () => handleExecute(action.steps)
             },
-            action.name
+            actionKeys[i]
           )) })
         ] }),
         hasDocs && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
@@ -3301,7 +3660,7 @@ function CommandPanel({
               onSend,
               locale
             },
-            `${doc.name}-${doc.url ?? i}`
+            docKeys[i]
           )) })
         ] }),
         hasTopics && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
@@ -3313,7 +3672,7 @@ function CommandPanel({
               index: i,
               onSend
             },
-            topic.name
+            topicKeys[i]
           )) })
         ] })
       ] }),
@@ -3360,7 +3719,7 @@ function CommandPanel({
           accentColor,
           onExecute: () => handleExecute(action.steps)
         },
-        action.name
+        actionKeys[i]
       )) })
     ] }),
     hasDocs && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
@@ -3373,7 +3732,7 @@ function CommandPanel({
           onSend,
           locale
         },
-        `${doc.name}-${doc.url ?? i}`
+        docKeys[i]
       )) })
     ] }),
     hasTopics && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
@@ -3386,13 +3745,14 @@ function CommandPanel({
           compact: true,
           onSend
         },
-        topic.name
+        topicKeys[i]
       )) })
     ] })
   ] });
 }
 function ChatWidget({
   agentId,
+  apiUrl,
   workspaceId,
   agentName,
   displayName,
@@ -3453,8 +3813,10 @@ function ChatWidget({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, []);
+  const resolvePageContext = () => userContext?.pageContext ?? (typeof window === "undefined" ? void 0 : derivePageContext(window.location, clientActions));
   const chat = useChat({
     agentId,
+    apiUrl,
     workspaceId,
     envId,
     source,
@@ -3462,10 +3824,13 @@ function ChatWidget({
     persist,
     onNavigate,
     playgroundOverrides,
-    customBackend
+    customBackend,
+    copilotColor: userMessageColor,
+    resolvePageContext: () => resolvePageContext()
   });
   const voice = useVoice({
     agentId,
+    apiUrl,
     onTranscript: (text) => {
       if (voiceAutoSend) {
         void chat.send(text);
@@ -3474,7 +3839,7 @@ function ChatWidget({
       }
     }
   });
-  const attachmentHook = useAttachments({ agentId });
+  const attachmentHook = useAttachments({ agentId, apiUrl });
   const debugTraceLenRef = react.useRef(0);
   react.useEffect(() => {
     if (!onDebugTrace || chat.debugTraces.length <= debugTraceLenRef.current)
@@ -3574,9 +3939,9 @@ function ChatWidget({
   const showInlineCommandPanel = showCommandPanel && !showSidebar && chat.messages.length === 0 && (showQuickActions && clientActions.length > 0 || showRagTopics && ragTopics.length > 0 || showRagDocuments && ragDocuments.length > 0);
   const handleExecuteAction = react.useCallback(
     (steps) => {
-      executeDeclarativeSteps(steps, onNavigate);
+      executeDeclarativeSteps(steps, onNavigate, userMessageColor);
     },
-    [onNavigate]
+    [onNavigate, userMessageColor]
   );
   const [activeActionIndex, setActiveActionIndex] = react.useState(-1);
   const query = chat.input.toLowerCase().trim();
@@ -3633,11 +3998,12 @@ function ChatWidget({
     },
     [matchingActions, activeActionIndex, handleExecuteAction, chat]
   );
+  const pageContext = resolvePageContext();
   const commandPanelProps = {
-    pageUrl: userContext?.pageContext?.url,
-    pageTitle: userContext?.pageContext?.title,
-    pageParams: userContext?.pageContext?.params,
-    pageVars: userContext?.pageContext?.vars,
+    pageUrl: pageContext?.url,
+    pageTitle: pageContext?.title,
+    pageParams: pageContext?.params,
+    pageVars: pageContext?.vars,
     metadata: userContext?.metadata,
     clientActions: showQuickActions ? clientActions : [],
     ragTopics: showRagTopics ? ragTopics : [],
@@ -3957,7 +4323,6 @@ function ChatWidget({
     }
   );
 }
-var WALLAVI_PUBLIC_API = "https://wallavi-production.up.railway.app";
 var EMPTY = {
   remoteConfig: {},
   bubbleIconUrl: void 0,
@@ -3971,7 +4336,37 @@ var EMPTY = {
   panelHeight: 580,
   loading: false
 };
-function useAutoConfig(agentId, enabled) {
+function toChatProps(cfg) {
+  const remote = {};
+  const set = (key, value) => {
+    if (value !== null && value !== void 0) remote[key] = value;
+  };
+  set("agentName", cfg.agentName);
+  set("profilePicture", cfg.profilePicture);
+  set("displayName", cfg.displayName);
+  set("theme", cfg.theme);
+  set("userMessageColor", cfg.userMessageColor);
+  if (cfg.initialMessages?.length) remote.initialMessages = cfg.initialMessages;
+  if (cfg.suggestedMessages?.length)
+    remote.suggestedMessages = cfg.suggestedMessages;
+  set("messagePlaceholder", cfg.messagePlaceholder);
+  set("watermark", cfg.watermark);
+  set("footer", cfg.footer);
+  set("showThinking", cfg.showThinking);
+  set("regenerateMessage", cfg.regenerateMessage);
+  set("widgetLayout", cfg.widgetLayout);
+  set("enableVoice", cfg.enableVoice);
+  set("showCommandPanel", cfg.showCommandPanel);
+  set("showRagTopics", cfg.showRagTopics);
+  set("showRagDocuments", cfg.showRagDocuments);
+  set("showQuickActions", cfg.showQuickActions);
+  set("clientActions", cfg.clientActions);
+  set("ragTopics", cfg.ragTopics);
+  set("ragDocuments", cfg.ragDocuments);
+  set("locale", cfg.locale);
+  return remote;
+}
+function useAutoConfig(agentId, enabled, apiUrl) {
   const [result, setResult] = react.useState(() => ({
     ...EMPTY,
     loading: enabled && Boolean(agentId)
@@ -3982,61 +4377,34 @@ function useAutoConfig(agentId, enabled) {
       return;
     }
     let cancelled = false;
-    fetch(`${WALLAVI_PUBLIC_API}/api/public/widget/${agentId}`).then((r) => r.json()).then((body) => {
+    setResult({ ...EMPTY, loading: true });
+    fetch(`${resolveApiUrl(apiUrl)}/api/public/widget/${agentId}`).then((r) => r.json()).then((body) => {
       if (cancelled) return;
-      const cfg = body?.data ?? {};
-      const remote = {};
-      if (cfg.profilePicture != null)
-        remote.profilePicture = cfg.profilePicture;
-      if (cfg.displayName != null)
-        remote.displayName = cfg.displayName;
-      if (cfg.theme) remote.theme = cfg.theme;
-      if (cfg.userMessageColor)
-        remote.userMessageColor = cfg.userMessageColor;
-      if (Array.isArray(cfg.initialMessages) && cfg.initialMessages.length > 0)
-        remote.initialMessages = cfg.initialMessages;
-      if (Array.isArray(cfg.suggestedMessages))
-        remote.suggestedMessages = cfg.suggestedMessages;
-      if (cfg.messagePlaceholder != null)
-        remote.messagePlaceholder = cfg.messagePlaceholder;
-      if (cfg.watermark != null) remote.watermark = cfg.watermark;
-      if (cfg.footer != null) remote.footer = cfg.footer;
-      if (cfg.showThinking != null)
-        remote.showThinking = cfg.showThinking;
-      if (cfg.regenerateMessage != null)
-        remote.regenerateMessage = cfg.regenerateMessage;
-      if (cfg.widgetLayout)
-        remote.widgetLayout = cfg.widgetLayout;
-      if (cfg.enableVoice != null)
-        remote.enableVoice = cfg.enableVoice;
-      if (cfg.clientActions)
-        remote.clientActions = cfg.clientActions;
-      if (Array.isArray(cfg.ragTopics))
-        remote.ragTopics = cfg.ragTopics;
-      if (Array.isArray(cfg.ragDocuments))
-        remote.ragDocuments = cfg.ragDocuments;
-      if (cfg.locale != null)
-        remote.locale = cfg.locale;
+      const cfg = body?.data;
+      if (!cfg) {
+        setResult(EMPTY);
+        return;
+      }
       setResult({
-        remoteConfig: remote,
+        remoteConfig: toChatProps(cfg),
         bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
         autoOpen: Boolean(cfg.autoOpen),
         keyboardShortcut: Boolean(cfg.keyboardShortcut),
         position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
         widgetLayout: cfg.widgetLayout === "center" ? "center" : "bubble",
-        clientActions: Array.isArray(cfg.clientActions) ? cfg.clientActions : [],
-        bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
-        panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
-        panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
+        clientActions: cfg.clientActions ?? [],
+        bubbleSize: cfg.bubbleSize ?? 52,
+        panelWidth: cfg.panelWidth ?? 360,
+        panelHeight: cfg.panelHeight ?? 580,
         loading: false
       });
     }).catch(() => {
-      if (!cancelled) setResult((r) => ({ ...r, loading: false }));
+      if (!cancelled) setResult(EMPTY);
     });
     return () => {
       cancelled = true;
     };
-  }, [agentId, enabled]);
+  }, [agentId, enabled, apiUrl]);
   return result;
 }
 function toWidgetMsg(m) {
@@ -4117,6 +4485,38 @@ function useSupportChat({
     },
     [base]
   );
+  function loadAblyScript() {
+    return new Promise((resolve, reject) => {
+      if (typeof window === "undefined") {
+        resolve(null);
+        return;
+      }
+      if (window.Ably) {
+        resolve(window.Ably);
+        return;
+      }
+      const existing = document.querySelector("script[data-ably-sdk]");
+      if (existing) {
+        existing.addEventListener("load", () => resolve(window.Ably));
+        existing.addEventListener(
+          "error",
+          () => reject(new Error("Ably CDN load failed"))
+        );
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = "https://cdn.ably.com/lib/ably.min-2.js";
+      script.crossOrigin = "anonymous";
+      script.async = true;
+      script.setAttribute("data-ably-sdk", "true");
+      script.onload = () => resolve(window.Ably);
+      script.onerror = () => {
+        script.remove();
+        reject(new Error("Ably CDN load failed"));
+      };
+      document.head.appendChild(script);
+    });
+  }
   react.useEffect(() => {
     if (!enabled || !session) return;
     void loadMessages(session);
@@ -4131,7 +4531,8 @@ function useSupportChat({
         );
         if (!res.ok) return;
         const { tokenRequest, channel: channelName } = await res.json();
-        const AblyLib = (await import('ably')).default;
+        const AblyLib = await loadAblyScript();
+        if (!AblyLib) return;
         ablyClient = new AblyLib.Realtime({
           authCallback: (_, cb) => cb(null, tokenRequest)
         });
@@ -4439,9 +4840,9 @@ function BubbleWidget({
   height: heightProp,
   expandedWidth = 640,
   expandedHeight = "calc(100vh - 100px)",
-  keyboardShortcut: keyboardShortcutProp = false,
+  keyboardShortcut: keyboardShortcutProp,
   shortcutKey = "k",
-  autoOpen: autoOpenProp = false,
+  autoOpen: autoOpenProp,
   bubbleIconUrl: bubbleIconUrlProp,
   bubbleSize: bubbleSizeProp,
   panelClassName,
@@ -4482,24 +4883,25 @@ function BubbleWidget({
   }, []);
   const remote = useAutoConfig(
     inboxToken ? "" : chatProps.agentId ?? "",
-    !inboxToken && autoConfig
+    !inboxToken && autoConfig,
+    chatProps.apiUrl
   );
-  const resolvedPosition = remote.position ?? positionProp;
-  const resolvedLayout = remote.widgetLayout ?? chatProps.widgetLayout ?? "bubble";
-  const resolvedBubbleIcon = remote.bubbleIconUrl ?? bubbleIconUrlProp;
-  const resolvedAutoOpen = remote.autoOpen || autoOpenProp;
-  const resolvedKeyboardShortcut = remote.keyboardShortcut || keyboardShortcutProp;
-  const resolvedBubbleSize = remote.bubbleSize ?? bubbleSizeProp;
-  const resolvedWidth = remote.panelWidth ?? widthProp;
-  const resolvedHeight = remote.panelHeight ?? heightProp;
+  const resolvedPosition = positionProp ?? remote.position;
+  const resolvedLayout = chatProps.widgetLayout ?? remote.widgetLayout;
+  const resolvedBubbleIcon = bubbleIconUrlProp ?? remote.bubbleIconUrl;
+  const resolvedAutoOpen = autoOpenProp ?? remote.autoOpen;
+  const resolvedKeyboardShortcut = keyboardShortcutProp ?? remote.keyboardShortcut;
+  const resolvedBubbleSize = bubbleSizeProp ?? remote.bubbleSize;
+  const resolvedWidth = widthProp ?? remote.panelWidth;
+  const resolvedHeight = heightProp ?? remote.panelHeight;
   const definedChatProps = Object.fromEntries(
     Object.entries(chatProps).filter(([, v]) => v !== void 0)
   );
   const mergedConfig = {
-    ...definedChatProps,
     ...remote.remoteConfig,
+    ...definedChatProps,
     agentId: chatProps.agentId ?? "",
-    agentName: remote.remoteConfig.agentName ?? chatProps.agentName ?? "Asistente",
+    agentName: chatProps.agentName ?? remote.remoteConfig.agentName ?? "Asistente",
     source: chatProps.source ?? remote.remoteConfig.source ?? "web"
   };
   const supportBackend = useSupportChat(
@@ -4515,6 +4917,10 @@ function BubbleWidget({
   react.useEffect(() => {
     setOpenRef.current = setOpen;
   });
+  const openRef = react.useRef(open);
+  react.useEffect(() => {
+    openRef.current = open;
+  });
   react.useEffect(() => {
     if (!resolvedAutoOpen || autoOpenedRef.current) return;
     const dismissedUntil = Number(localStorage.getItem(KEY_DISMISSED) ?? 0);
@@ -4524,15 +4930,29 @@ function BubbleWidget({
     }
   }, [resolvedAutoOpen]);
   react.useEffect(() => {
-    if (!resolvedKeyboardShortcut) return;
+    const onToggle = () => setOpenRef.current((v) => !v);
+    const onOpen = () => setOpenRef.current(true);
+    const onClose = () => setOpenRef.current(false);
+    window.addEventListener("wallavi:toggle-assistant", onToggle);
+    window.addEventListener("wallavi:open-assistant", onOpen);
+    window.addEventListener("wallavi:close-assistant", onClose);
     const onKey = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey.toLowerCase()) {
+      if (resolvedKeyboardShortcut && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey.toLowerCase()) {
         e.preventDefault();
         setOpenRef.current((v) => !v);
+      } else if (e.key === "Escape" && openRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpenRef.current(false);
       }
     };
     window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("wallavi:toggle-assistant", onToggle);
+      window.removeEventListener("wallavi:open-assistant", onOpen);
+      window.removeEventListener("wallavi:close-assistant", onClose);
+      window.removeEventListener("keydown", onKey);
+    };
   }, [resolvedKeyboardShortcut, shortcutKey]);
   react.useEffect(() => {
     if (!open) return;
@@ -4587,7 +5007,8 @@ function BubbleWidget({
           display: "flex",
           flexDirection: "column",
           alignItems: isLeft ? "flex-start" : "flex-end",
-          gap: 12
+          gap: 12,
+          pointerEvents: !open && hideBubble ? "none" : void 0
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4604,12 +5025,14 @@ function BubbleWidget({
                 zIndex: 9999,
                 width: panelWidth,
                 height: panelHeight,
-                transition: "width 0.3s ease, height 0.3s ease"
+                transition: "width 0.3s ease, height 0.3s ease",
+                pointerEvents: "auto"
               } : {
                 display: open ? "block" : "none",
                 width: panelWidth,
                 height: panelHeight,
-                transition: "width 0.3s ease, height 0.3s ease"
+                transition: "width 0.3s ease, height 0.3s ease",
+                pointerEvents: "auto"
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 ChatWidget,