@wallavi/widget 1.13.2 → 1.14.0

package/dist/index.d.mts

@@ -358,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

@@ -358,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

@@ -227,7 +227,7 @@ async function consumeStream(body, handler) {
 function applyUiEventToMessages(prev, proto, msgId) {
   let idx = prev.findIndex((m) => m.id === msgId);
   if (idx === -1) {
-    if (proto.type === "finish" || proto.type === "debug-trace" || proto.type === "step-start" || proto.type === "step-end" || proto.type === "navigate" || proto.type === "suggestions") {
+    if (proto.type === "finish" || proto.type === "debug-trace" || proto.type === "step-start" || proto.type === "step-end" || proto.type === "suggestions") {
       return prev;
     }
     prev = [...prev, { id: msgId, role: "assistant", parts: [] }];
@@ -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);
@@ -846,10 +901,6 @@ function useChat({
   }, [messages]);
   const applyStreamEvent = react.useCallback(
     (proto, msgId) => {
-      if (proto.type === "navigate") {
-        if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
-        return;
-      }
       if (proto.type === "client-action") {
         executeDeclarativeSteps(
           proto.steps,
@@ -3631,7 +3682,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 }),
@@ -3644,7 +3695,7 @@ function CommandPanel({
               action,
               index: i,
               accentColor,
-              onExecute: () => handleExecute(action.steps)
+              onExecute: () => handleExecute(action)
             },
             actionKeys[i]
           )) })
@@ -3716,7 +3767,7 @@ function CommandPanel({
           action,
           index: i,
           accentColor,
-          onExecute: () => handleExecute(action.steps)
+          onExecute: () => handleExecute(action)
         },
         actionKeys[i]
       )) })
@@ -3936,12 +3987,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(() => {
@@ -3987,7 +4044,7 @@ function ChatWidget({
         e.preventDefault();
         const selectedAction = matchingActions[activeActionIndex];
         if (selectedAction) {
-          handleExecuteAction(selectedAction.steps);
+          handleExecuteAction(selectedAction);
           chat.setInput("");
         }
       } else if (e.key === "Escape") {
@@ -4222,7 +4279,7 @@ function ChatWidget({
                           "button",
                           {
                             onClick: () => {
-                              handleExecuteAction(action.steps);
+                              handleExecuteAction(action);
                               chat.setInput("");
                             },
                             className: cn(

package/dist/index.mjs

@@ -201,7 +201,7 @@ async function consumeStream(body, handler) {
 function applyUiEventToMessages(prev, proto, msgId) {
   let idx = prev.findIndex((m) => m.id === msgId);
   if (idx === -1) {
-    if (proto.type === "finish" || proto.type === "debug-trace" || proto.type === "step-start" || proto.type === "step-end" || proto.type === "navigate" || proto.type === "suggestions") {
+    if (proto.type === "finish" || proto.type === "debug-trace" || proto.type === "step-start" || proto.type === "step-end" || proto.type === "suggestions") {
       return prev;
     }
     prev = [...prev, { id: msgId, role: "assistant", parts: [] }];
@@ -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);
@@ -820,10 +875,6 @@ function useChat({
   }, [messages]);
   const applyStreamEvent = useCallback(
     (proto, msgId) => {
-      if (proto.type === "navigate") {
-        if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
-        return;
-      }
       if (proto.type === "client-action") {
         executeDeclarativeSteps(
           proto.steps,
@@ -3605,7 +3656,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 }),
@@ -3618,7 +3669,7 @@ function CommandPanel({
               action,
               index: i,
               accentColor,
-              onExecute: () => handleExecute(action.steps)
+              onExecute: () => handleExecute(action)
             },
             actionKeys[i]
           )) })
@@ -3690,7 +3741,7 @@ function CommandPanel({
           action,
           index: i,
           accentColor,
-          onExecute: () => handleExecute(action.steps)
+          onExecute: () => handleExecute(action)
         },
         actionKeys[i]
       )) })
@@ -3910,12 +3961,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(() => {
@@ -3961,7 +4018,7 @@ function ChatWidget({
         e.preventDefault();
         const selectedAction = matchingActions[activeActionIndex];
         if (selectedAction) {
-          handleExecuteAction(selectedAction.steps);
+          handleExecuteAction(selectedAction);
           chat.setInput("");
         }
       } else if (e.key === "Escape") {
@@ -4196,7 +4253,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/protocol": "0.0.1",
-    "@wallavi/typescript-config": "0.0.1"
+    "@wallavi/typescript-config": "0.0.1",
+    "@wallavi/protocol": "0.0.1"
   },
   "exports": {
     ".": {
@@ -44,7 +44,7 @@
   },
   "private": false,
   "types": "./dist/index.d.ts",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "scripts": {
     "build": "tsup && pnpm build:css",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --config tailwind.config.cjs --minify",