@wallavi/widget 1.13.1 → 1.13.3

package/dist/index.d.mts

@@ -174,8 +174,10 @@ interface ChatWidgetConfig {
     showThinking?: boolean;
     regenerateMessage?: boolean;
     /**
-     * Persist messages and threadId in sessionStorage so the conversation
-     * survives page reloads and navigations. Uses agentId as the storage key.
+     * Persist the conversation so it survives page reloads and navigations.
+     * The storage key is `wallavi_<agentId>_<userId>` when `userContext.userId`
+     * is set, otherwise `wallavi_<agentId>`. Messages go in sessionStorage under
+     * `<key>_msgs` and the threadId in localStorage under `<key>_tid`.
      */
     persist?: boolean;
     onNavigate?: (path: string) => void;
@@ -356,7 +358,10 @@ interface CommandPanelProps {
     ragTopics?: RagTopicInfo[];
     ragDocuments?: RagDocumentInfo[];
     onSend: (text: string) => void;
-    onExecuteAction?: (steps: any[]) => void;
+    onExecuteAction?: (action: {
+        name: string;
+        steps: any[];
+    }) => void;
     accentColor?: string;
     isDark?: boolean;
     watermark?: boolean;

package/dist/index.d.ts

@@ -174,8 +174,10 @@ interface ChatWidgetConfig {
     showThinking?: boolean;
     regenerateMessage?: boolean;
     /**
-     * Persist messages and threadId in sessionStorage so the conversation
-     * survives page reloads and navigations. Uses agentId as the storage key.
+     * Persist the conversation so it survives page reloads and navigations.
+     * The storage key is `wallavi_<agentId>_<userId>` when `userContext.userId`
+     * is set, otherwise `wallavi_<agentId>`. Messages go in sessionStorage under
+     * `<key>_msgs` and the threadId in localStorage under `<key>_tid`.
      */
     persist?: boolean;
     onNavigate?: (path: string) => void;
@@ -356,7 +358,10 @@ interface CommandPanelProps {
     ragTopics?: RagTopicInfo[];
     ragDocuments?: RagDocumentInfo[];
     onSend: (text: string) => void;
-    onExecuteAction?: (steps: any[]) => void;
+    onExecuteAction?: (action: {
+        name: string;
+        steps: any[];
+    }) => void;
     accentColor?: string;
     isDark?: boolean;
     watermark?: boolean;

package/dist/index.js

@@ -351,6 +351,55 @@ function applyUiEventToMessages(prev, proto, msgId) {
   return copy;
 }
 
+// src/core/quick-action.ts
+var BRACES = /\{\{(?:toolInput\.)?([a-zA-Z0-9_]+)\}\}|\{([a-zA-Z0-9_]+)\}/g;
+var ROUTE = /\{\{(?:toolInput\.)?([a-zA-Z0-9_]+)\}\}|\{([a-zA-Z0-9_]+)\}|\[([a-zA-Z0-9_]+)\]|(?<=^|\/):([a-zA-Z0-9_]+)(?=[/?#]|$)/g;
+function fill(text, pattern, sources, missing) {
+  return text.replace(pattern, (match, ...groups) => {
+    const key = groups.find((g) => typeof g === "string");
+    if (!key) return match;
+    for (const source of sources) {
+      const value = source?.[key];
+      if (typeof value === "string" && value !== "") return value;
+      if (typeof value === "number") return String(value);
+    }
+    missing?.add(key);
+    return match;
+  });
+}
+function fillPayload(value, sources) {
+  if (typeof value === "string") return fill(value, BRACES, sources);
+  if (Array.isArray(value)) return value.map((v) => fillPayload(v, sources));
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([k, v]) => [k, fillPayload(v, sources)])
+    );
+  }
+  return value;
+}
+function planQuickAction(steps, pageParams, metadata) {
+  const sources = [pageParams, metadata];
+  const missing = /* @__PURE__ */ new Set();
+  const filled = steps.map((original) => {
+    const step = original;
+    const out = { ...step };
+    if (typeof step.value === "string") {
+      out.value = step.action === "navigate" ? fill(step.value, ROUTE, sources, missing) : fill(step.value, BRACES, sources);
+    }
+    if (typeof step.selector === "string") {
+      out.selector = fill(step.selector, BRACES, sources);
+    }
+    if (step.payload !== void 0) {
+      out.payload = fillPayload(step.payload, sources);
+    }
+    return out;
+  });
+  return missing.size > 0 ? { kind: "ask_agent", missing: [...missing] } : { kind: "run", steps: filled };
+}
+function hasRoutePlaceholder(url) {
+  return new RegExp(ROUTE.source).test(url);
+}
+
 // src/core/declarative-actions.ts
 function sanitizeSelector(selector) {
   if (!selector || typeof selector !== "string") return null;
@@ -625,6 +674,12 @@ async function executeDeclarativeSteps(steps, onNavigate, copilotColor) {
         }
         case "navigate": {
           const url = sanitizeUrl(step.value);
+          if (url && hasRoutePlaceholder(url)) {
+            console.warn(
+              "[Wallavi Widget] Blocked navigate with unfilled route params"
+            );
+            break;
+          }
           if (url) {
             if (onNavigate) {
               onNavigate(url);
@@ -1102,7 +1157,6 @@ function useChat({
     if (persistKey) {
       try {
         sessionStorage.removeItem(`${persistKey}_msgs`);
-        sessionStorage.removeItem(`${persistKey}_tid`);
         localStorage.removeItem(`${persistKey}_tid`);
       } catch {
       }
@@ -3632,7 +3686,7 @@ function CommandPanel({
   const hasContent = hasActions || hasDocs || hasTopics;
   if (!hasContent) return null;
   const isSidebar = mode === "sidebar";
-  const handleExecute = (steps) => onExecuteAction?.(steps);
+  const handleExecute = (action) => onExecuteAction?.(action);
   if (isSidebar) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-w-[300px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/50 ww-flex ww-flex-col ww-h-full ww-overflow-hidden ww-animate-in ww-fade-in ww-slide-in-from-right-2 ww-duration-300", children: [
       /* @__PURE__ */ jsxRuntime.jsx(PageBadge, { pageTitle, pageUrl, locale }),
@@ -3645,7 +3699,7 @@ function CommandPanel({
               action,
               index: i,
               accentColor,
-              onExecute: () => handleExecute(action.steps)
+              onExecute: () => handleExecute(action)
             },
             actionKeys[i]
           )) })
@@ -3717,7 +3771,7 @@ function CommandPanel({
           action,
           index: i,
           accentColor,
-          onExecute: () => handleExecute(action.steps)
+          onExecute: () => handleExecute(action)
         },
         actionKeys[i]
       )) })
@@ -3937,12 +3991,18 @@ function ChatWidget({
   const messagesList = isDefaultGreeting ? [getWidgetTranslation("defaultGreeting", locale)] : initialMessages;
   const showSidebar = showCommandPanel && widgetLayout === "center" && isDesktop;
   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, userMessageColor);
-    },
-    [onNavigate, userMessageColor]
-  );
+  const handleExecuteAction = (action) => {
+    const plan = planQuickAction(
+      action.steps,
+      resolvePageContext()?.params,
+      userContext?.metadata
+    );
+    if (plan.kind === "run") {
+      executeDeclarativeSteps(plan.steps, onNavigate, userMessageColor);
+    } else {
+      chat.send(action.name);
+    }
+  };
   const [activeActionIndex, setActiveActionIndex] = react.useState(-1);
   const query = chat.input.toLowerCase().trim();
   const matchingActions = react.useMemo(() => {
@@ -3988,7 +4048,7 @@ function ChatWidget({
         e.preventDefault();
         const selectedAction = matchingActions[activeActionIndex];
         if (selectedAction) {
-          handleExecuteAction(selectedAction.steps);
+          handleExecuteAction(selectedAction);
           chat.setInput("");
         }
       } else if (e.key === "Escape") {
@@ -4223,7 +4283,7 @@ function ChatWidget({
                           "button",
                           {
                             onClick: () => {
-                              handleExecuteAction(action.steps);
+                              handleExecuteAction(action);
                               chat.setInput("");
                             },
                             className: cn(

package/dist/index.mjs

@@ -325,6 +325,55 @@ function applyUiEventToMessages(prev, proto, msgId) {
   return copy;
 }
 
+// src/core/quick-action.ts
+var BRACES = /\{\{(?:toolInput\.)?([a-zA-Z0-9_]+)\}\}|\{([a-zA-Z0-9_]+)\}/g;
+var ROUTE = /\{\{(?:toolInput\.)?([a-zA-Z0-9_]+)\}\}|\{([a-zA-Z0-9_]+)\}|\[([a-zA-Z0-9_]+)\]|(?<=^|\/):([a-zA-Z0-9_]+)(?=[/?#]|$)/g;
+function fill(text, pattern, sources, missing) {
+  return text.replace(pattern, (match, ...groups) => {
+    const key = groups.find((g) => typeof g === "string");
+    if (!key) return match;
+    for (const source of sources) {
+      const value = source?.[key];
+      if (typeof value === "string" && value !== "") return value;
+      if (typeof value === "number") return String(value);
+    }
+    missing?.add(key);
+    return match;
+  });
+}
+function fillPayload(value, sources) {
+  if (typeof value === "string") return fill(value, BRACES, sources);
+  if (Array.isArray(value)) return value.map((v) => fillPayload(v, sources));
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([k, v]) => [k, fillPayload(v, sources)])
+    );
+  }
+  return value;
+}
+function planQuickAction(steps, pageParams, metadata) {
+  const sources = [pageParams, metadata];
+  const missing = /* @__PURE__ */ new Set();
+  const filled = steps.map((original) => {
+    const step = original;
+    const out = { ...step };
+    if (typeof step.value === "string") {
+      out.value = step.action === "navigate" ? fill(step.value, ROUTE, sources, missing) : fill(step.value, BRACES, sources);
+    }
+    if (typeof step.selector === "string") {
+      out.selector = fill(step.selector, BRACES, sources);
+    }
+    if (step.payload !== void 0) {
+      out.payload = fillPayload(step.payload, sources);
+    }
+    return out;
+  });
+  return missing.size > 0 ? { kind: "ask_agent", missing: [...missing] } : { kind: "run", steps: filled };
+}
+function hasRoutePlaceholder(url) {
+  return new RegExp(ROUTE.source).test(url);
+}
+
 // src/core/declarative-actions.ts
 function sanitizeSelector(selector) {
   if (!selector || typeof selector !== "string") return null;
@@ -599,6 +648,12 @@ async function executeDeclarativeSteps(steps, onNavigate, copilotColor) {
         }
         case "navigate": {
           const url = sanitizeUrl(step.value);
+          if (url && hasRoutePlaceholder(url)) {
+            console.warn(
+              "[Wallavi Widget] Blocked navigate with unfilled route params"
+            );
+            break;
+          }
           if (url) {
             if (onNavigate) {
               onNavigate(url);
@@ -1076,7 +1131,6 @@ function useChat({
     if (persistKey) {
       try {
         sessionStorage.removeItem(`${persistKey}_msgs`);
-        sessionStorage.removeItem(`${persistKey}_tid`);
         localStorage.removeItem(`${persistKey}_tid`);
       } catch {
       }
@@ -3606,7 +3660,7 @@ function CommandPanel({
   const hasContent = hasActions || hasDocs || hasTopics;
   if (!hasContent) return null;
   const isSidebar = mode === "sidebar";
-  const handleExecute = (steps) => onExecuteAction?.(steps);
+  const handleExecute = (action) => onExecuteAction?.(action);
   if (isSidebar) {
     return /* @__PURE__ */ jsxs("div", { className: "ww-w-[300px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/50 ww-flex ww-flex-col ww-h-full ww-overflow-hidden ww-animate-in ww-fade-in ww-slide-in-from-right-2 ww-duration-300", children: [
       /* @__PURE__ */ jsx(PageBadge, { pageTitle, pageUrl, locale }),
@@ -3619,7 +3673,7 @@ function CommandPanel({
               action,
               index: i,
               accentColor,
-              onExecute: () => handleExecute(action.steps)
+              onExecute: () => handleExecute(action)
             },
             actionKeys[i]
           )) })
@@ -3691,7 +3745,7 @@ function CommandPanel({
           action,
           index: i,
           accentColor,
-          onExecute: () => handleExecute(action.steps)
+          onExecute: () => handleExecute(action)
         },
         actionKeys[i]
       )) })
@@ -3911,12 +3965,18 @@ function ChatWidget({
   const messagesList = isDefaultGreeting ? [getWidgetTranslation("defaultGreeting", locale)] : initialMessages;
   const showSidebar = showCommandPanel && widgetLayout === "center" && isDesktop;
   const showInlineCommandPanel = showCommandPanel && !showSidebar && chat.messages.length === 0 && (showQuickActions && clientActions.length > 0 || showRagTopics && ragTopics.length > 0 || showRagDocuments && ragDocuments.length > 0);
-  const handleExecuteAction = useCallback(
-    (steps) => {
-      executeDeclarativeSteps(steps, onNavigate, userMessageColor);
-    },
-    [onNavigate, userMessageColor]
-  );
+  const handleExecuteAction = (action) => {
+    const plan = planQuickAction(
+      action.steps,
+      resolvePageContext()?.params,
+      userContext?.metadata
+    );
+    if (plan.kind === "run") {
+      executeDeclarativeSteps(plan.steps, onNavigate, userMessageColor);
+    } else {
+      chat.send(action.name);
+    }
+  };
   const [activeActionIndex, setActiveActionIndex] = useState(-1);
   const query = chat.input.toLowerCase().trim();
   const matchingActions = useMemo(() => {
@@ -3962,7 +4022,7 @@ function ChatWidget({
         e.preventDefault();
         const selectedAction = matchingActions[activeActionIndex];
         if (selectedAction) {
-          handleExecuteAction(selectedAction.steps);
+          handleExecuteAction(selectedAction);
           chat.setInput("");
         }
       } else if (e.key === "Escape") {
@@ -4197,7 +4257,7 @@ function ChatWidget({
                           "button",
                           {
                             onClick: () => {
-                              handleExecuteAction(action.steps);
+                              handleExecuteAction(action);
                               chat.setInput("");
                             },
                             className: cn(

package/package.json

@@ -22,8 +22,8 @@
     "tsup": "^8.3.5",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "@wallavi/typescript-config": "0.0.1",
-    "@wallavi/protocol": "0.0.1"
+    "@wallavi/protocol": "0.0.1",
+    "@wallavi/typescript-config": "0.0.1"
   },
   "exports": {
     ".": {
@@ -44,7 +44,7 @@
   },
   "private": false,
   "types": "./dist/index.d.ts",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "scripts": {
     "build": "tsup && pnpm build:css",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --config tailwind.config.cjs --minify",