@usecrow/ui 0.1.33 → 0.1.34

package/dist/index.d.cts

@@ -187,6 +187,15 @@ interface WidgetConfigResponse {
     welcomeMessage?: string | null;
     /** AI model to use for this product */
     model?: string;
+    /** Whether page navigation is enabled for this product */
+    pageNavigationEnabled?: boolean;
+    /** Route definitions for page navigation */
+    pageNavigationRoutes?: Array<{
+        name: string;
+        path: string;
+        description?: string;
+        params?: Record<string, string>;
+    }>;
 }
 
 /** Identity data passed to the identify function */
@@ -230,10 +239,12 @@ interface CrowWidgetProps {
     onIdentify?: (identify: IdentifyFunction) => void;
     /** Client-side tools the agent can call */
     tools?: ToolsMap;
+    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
+    navigate?: (path: string) => void;
     /** Callback fired when a server-side tool completes, with the tool name and full result data */
     onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
 }
-declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, onToolResult, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -266,10 +277,12 @@ interface CrowCopilotProps {
     className?: string;
     /** Callback when copilot is ready */
     onReady?: () => void;
+    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
+    navigate?: (path: string) => void;
     /** Callback fired when a server-side tool completes, with the tool name and full result data */
     onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
 }
-declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, onToolResult, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -663,6 +676,15 @@ interface UseWidgetStylesResult {
     agentName: string;
     /** Whether browser_use is enabled for this product */
     browserUseEnabled: boolean;
+    /** Whether page navigation is enabled for this product */
+    pageNavigationEnabled: boolean;
+    /** Route definitions for page navigation */
+    pageNavigationRoutes: Array<{
+        name: string;
+        path: string;
+        description?: string;
+        params?: Record<string, string>;
+    }>;
     /** Whether to show thinking/reasoning to users */
     showThinking: boolean;
     /** Whether to persist anonymous conversations across page refreshes (undefined while loading) */
@@ -695,6 +717,15 @@ interface UseCopilotStylesResult {
     error: Error | null;
     /** Agent name from product config */
     agentName: string;
+    /** Whether page navigation is enabled for this product */
+    pageNavigationEnabled: boolean;
+    /** Route definitions for page navigation */
+    pageNavigationRoutes: Array<{
+        name: string;
+        path: string;
+        description?: string;
+        params?: Record<string, string>;
+    }>;
     /** Whether to persist anonymous conversations across page refreshes (undefined while loading) */
     persistAnonymousConversations: boolean | undefined;
     /** Custom welcome message (undefined uses SDK default) */

package/dist/index.d.ts

@@ -187,6 +187,15 @@ interface WidgetConfigResponse {
     welcomeMessage?: string | null;
     /** AI model to use for this product */
     model?: string;
+    /** Whether page navigation is enabled for this product */
+    pageNavigationEnabled?: boolean;
+    /** Route definitions for page navigation */
+    pageNavigationRoutes?: Array<{
+        name: string;
+        path: string;
+        description?: string;
+        params?: Record<string, string>;
+    }>;
 }
 
 /** Identity data passed to the identify function */
@@ -230,10 +239,12 @@ interface CrowWidgetProps {
     onIdentify?: (identify: IdentifyFunction) => void;
     /** Client-side tools the agent can call */
     tools?: ToolsMap;
+    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
+    navigate?: (path: string) => void;
     /** Callback fired when a server-side tool completes, with the tool name and full result data */
     onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
 }
-declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, onToolResult, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -266,10 +277,12 @@ interface CrowCopilotProps {
     className?: string;
     /** Callback when copilot is ready */
     onReady?: () => void;
+    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
+    navigate?: (path: string) => void;
     /** Callback fired when a server-side tool completes, with the tool name and full result data */
     onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
 }
-declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, onToolResult, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -663,6 +676,15 @@ interface UseWidgetStylesResult {
     agentName: string;
     /** Whether browser_use is enabled for this product */
     browserUseEnabled: boolean;
+    /** Whether page navigation is enabled for this product */
+    pageNavigationEnabled: boolean;
+    /** Route definitions for page navigation */
+    pageNavigationRoutes: Array<{
+        name: string;
+        path: string;
+        description?: string;
+        params?: Record<string, string>;
+    }>;
     /** Whether to show thinking/reasoning to users */
     showThinking: boolean;
     /** Whether to persist anonymous conversations across page refreshes (undefined while loading) */
@@ -695,6 +717,15 @@ interface UseCopilotStylesResult {
     error: Error | null;
     /** Agent name from product config */
     agentName: string;
+    /** Whether page navigation is enabled for this product */
+    pageNavigationEnabled: boolean;
+    /** Route definitions for page navigation */
+    pageNavigationRoutes: Array<{
+        name: string;
+        path: string;
+        description?: string;
+        params?: Record<string, string>;
+    }>;
     /** Whether to persist anonymous conversations across page refreshes (undefined while loading) */
     persistAnonymousConversations: boolean | undefined;
     /** Custom welcome message (undefined uses SDK default) */

package/dist/index.js

@@ -1164,6 +1164,10 @@ function useWidgetStyles({
   const [browserUseEnabled, setBrowserUseEnabled] = useState(
     styleCache.get(key)?.browserUseEnabled || false
   );
+  const [pageNavigationEnabled, setPageNavigationEnabled] = useState(
+    styleCache.get(key)?.pageNavigationEnabled || false
+  );
+  const [pageNavigationRoutes, setPageNavigationRoutes] = useState(styleCache.get(key)?.pageNavigationRoutes || []);
   const [showThinking, setShowThinking] = useState(
     styleCache.get(key)?.showThinking ?? true
   );
@@ -1187,6 +1191,8 @@ function useWidgetStyles({
       setDbStyles(config.widgetStyles);
       setAgentName(config.agentName || "Assistant");
       setBrowserUseEnabled(config.browserUseEnabled || false);
+      setPageNavigationEnabled(config.pageNavigationEnabled || false);
+      setPageNavigationRoutes(config.pageNavigationRoutes || []);
       setShowThinking(config.showThinking ?? true);
       setPersistAnonymousConversations(config.persistAnonymousConversations ?? true);
       setWelcomeMessage(config.welcomeMessage ?? void 0);
@@ -1222,6 +1228,8 @@ function useWidgetStyles({
     error,
     agentName,
     browserUseEnabled,
+    pageNavigationEnabled,
+    pageNavigationRoutes,
     showThinking,
     persistAnonymousConversations,
     welcomeMessage,
@@ -1245,6 +1253,10 @@ function useCopilotStyles({
   const [agentName, setAgentName] = useState(
     styleCache.get(key)?.agentName || "Assistant"
   );
+  const [pageNavigationEnabled, setPageNavigationEnabled] = useState(
+    styleCache.get(key)?.pageNavigationEnabled || false
+  );
+  const [pageNavigationRoutes, setPageNavigationRoutes] = useState(styleCache.get(key)?.pageNavigationRoutes || []);
   const [persistAnonymousConversations, setPersistAnonymousConversations] = useState(
     styleCache.has(key) ? styleCache.get(key)?.persistAnonymousConversations ?? true : void 0
   );
@@ -1264,6 +1276,8 @@ function useCopilotStyles({
       styleCache.set(key, config);
       setDbStyles(config.copilotStyles);
       setAgentName(config.agentName || "Assistant");
+      setPageNavigationEnabled(config.pageNavigationEnabled || false);
+      setPageNavigationRoutes(config.pageNavigationRoutes || []);
       setPersistAnonymousConversations(config.persistAnonymousConversations ?? true);
       setWelcomeMessage(config.welcomeMessage ?? void 0);
       setSelectedModel(config.model ?? void 0);
@@ -1280,6 +1294,8 @@ function useCopilotStyles({
     if (cached) {
       setDbStyles(cached.copilotStyles);
       setAgentName(cached.agentName || "Assistant");
+      setPageNavigationEnabled(cached.pageNavigationEnabled || false);
+      setPageNavigationRoutes(cached.pageNavigationRoutes || []);
       setPersistAnonymousConversations(cached.persistAnonymousConversations ?? true);
       setWelcomeMessage(cached.welcomeMessage ?? void 0);
       setSelectedModel(cached.model ?? void 0);
@@ -1295,6 +1311,8 @@ function useCopilotStyles({
     isLoading,
     error,
     agentName,
+    pageNavigationEnabled,
+    pageNavigationRoutes,
     persistAnonymousConversations,
     welcomeMessage,
     selectedModel,
@@ -2842,6 +2860,7 @@ function CrowWidget({
   onReady,
   onIdentify,
   tools,
+  navigate,
   onToolResult
 }) {
   const {
@@ -2849,6 +2868,8 @@ function CrowWidget({
     isLoading: isLoadingStyles,
     agentName: agentNameFromAPI,
     browserUseEnabled,
+    pageNavigationEnabled,
+    pageNavigationRoutes,
     showThinking: showThinkingFromAPI,
     persistAnonymousConversations,
     welcomeMessage: welcomeMessageFromAPI,
@@ -3054,17 +3075,33 @@ function CrowWidget({
     };
   }, [handleBrowserConfirmation, handleBrowserQuestion, handleBrowserProgress]);
   useEffect(() => {
-    if (browserUseEnabled && !isLoadingStyles && Object.keys(autoTools).length === 0) {
+    if (browserUseEnabled && !isLoadingStyles && !autoTools.browser_use) {
       import('@usecrow/client/browser').then(({ createBrowserUseTool }) => {
-        setAutoTools({
+        setAutoTools((prev) => ({
+          ...prev,
           browser_use: createBrowserUseTool({ productId, apiUrl })
-        });
+        }));
         console.log("[Crow] browser_use tool auto-loaded");
       }).catch((err) => {
         console.warn("[Crow] Failed to load browser_use:", err);
       });
     }
   }, [browserUseEnabled, isLoadingStyles, productId, apiUrl, autoTools]);
+  useEffect(() => {
+    if (pageNavigationEnabled && pageNavigationRoutes.length > 0 && !isLoadingStyles) {
+      import('@usecrow/client').then(({ createNavigateToPageTool }) => {
+        setAutoTools((prev) => ({
+          ...prev,
+          navigateToPage: createNavigateToPageTool(pageNavigationRoutes, navigate)
+        }));
+        console.log(
+          `[Crow] navigateToPage tool auto-loaded with ${pageNavigationRoutes.length} routes`
+        );
+      }).catch((err) => {
+        console.warn("[Crow] Failed to load navigateToPage:", err);
+      });
+    }
+  }, [pageNavigationEnabled, pageNavigationRoutes, isLoadingStyles, navigate]);
   const mergedTools = useMemo(() => ({ ...autoTools, ...tools }), [autoTools, tools]);
   useEffect(() => {
     if (Object.keys(mergedTools).length > 0) {
@@ -3361,12 +3398,15 @@ function CrowCopilot({
   previewMode = false,
   className,
   onReady,
+  navigate,
   onToolResult
 }) {
   const {
     styles,
     isLoading: isLoadingStyles,
     agentName: agentNameFromAPI,
+    pageNavigationEnabled,
+    pageNavigationRoutes,
     persistAnonymousConversations,
     welcomeMessage: welcomeMessageFromAPI,
     selectedModel
@@ -3378,6 +3418,27 @@ function CrowCopilot({
   });
   const agentName = agentNameProp ?? agentNameFromAPI ?? title;
   const welcomeMessage = welcomeMessageProp ?? welcomeMessageFromAPI;
+  const [autoTools, setAutoTools] = useState({});
+  useEffect(() => {
+    if (pageNavigationEnabled && pageNavigationRoutes.length > 0 && !isLoadingStyles) {
+      import('@usecrow/client').then(({ createNavigateToPageTool }) => {
+        setAutoTools((prev) => ({
+          ...prev,
+          navigateToPage: createNavigateToPageTool(pageNavigationRoutes, navigate)
+        }));
+        console.log(
+          `[Crow] navigateToPage tool auto-loaded with ${pageNavigationRoutes.length} routes`
+        );
+      }).catch((err) => {
+        console.warn("[Crow] Failed to load navigateToPage:", err);
+      });
+    }
+  }, [pageNavigationEnabled, pageNavigationRoutes, isLoadingStyles, navigate]);
+  useEffect(() => {
+    if (Object.keys(autoTools).length > 0) {
+      window.crow?.("registerTools", autoTools);
+    }
+  }, [autoTools]);
   const messagesContainerRef = useRef(null);
   const tabsScrollRef = useRef(null);
   const executeClientToolRef = useRef(null);