@usecrow/ui 0.1.40 → 0.1.42

package/dist/index.d.cts

@@ -243,8 +243,19 @@ interface CrowWidgetProps {
     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;
+    /**
+     * Async function that returns a JWT for user identity verification.
+     * Called on mount and automatically on 401 (token refresh).
+     * Preferred over onIdentify for simpler integration.
+     */
+    getIdentityToken?: () => Promise<string>;
+    /**
+     * Page context data sent with every message. Reactive — updates whenever
+     * the object reference changes. Replaces window.crow('setContext', ...).
+     */
+    context?: Record<string, unknown>;
 }
-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;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared TypeScript interfaces for the widget and copilot
@@ -399,8 +410,33 @@ interface CrowCopilotProps {
      * ```
      */
     toolRenderers?: ToolRenderers;
+    /**
+     * Async function that returns a JWT for user identity verification.
+     * Called on mount and automatically on 401 (token refresh).
+     * Replaces the need for a separate component calling window.crow('identify').
+     *
+     * @example
+     * ```tsx
+     * getIdentityToken={async () => {
+     *   const res = await fetch('/api/crow-token');
+     *   const { token } = await res.json();
+     *   return token;
+     * }}
+     * ```
+     */
+    getIdentityToken?: () => Promise<string>;
+    /**
+     * Page context data sent with every message. Reactive — updates whenever
+     * the object reference changes. Replaces window.crow('setContext', ...).
+     *
+     * @example
+     * ```tsx
+     * context={{ cmsContentItemId: "abc-123", agentBlogId: "def-456" }}
+     * ```
+     */
+    context?: Record<string, unknown>;
 }
-declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, }: 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, toolRenderers, getIdentityToken, context, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -742,6 +778,8 @@ interface UseCopilotStylesResult {
     error: Error | null;
     /** Agent name from product config */
     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 */

package/dist/index.d.ts

@@ -243,8 +243,19 @@ interface CrowWidgetProps {
     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;
+    /**
+     * Async function that returns a JWT for user identity verification.
+     * Called on mount and automatically on 401 (token refresh).
+     * Preferred over onIdentify for simpler integration.
+     */
+    getIdentityToken?: () => Promise<string>;
+    /**
+     * Page context data sent with every message. Reactive — updates whenever
+     * the object reference changes. Replaces window.crow('setContext', ...).
+     */
+    context?: Record<string, unknown>;
 }
-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;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared TypeScript interfaces for the widget and copilot
@@ -399,8 +410,33 @@ interface CrowCopilotProps {
      * ```
      */
     toolRenderers?: ToolRenderers;
+    /**
+     * Async function that returns a JWT for user identity verification.
+     * Called on mount and automatically on 401 (token refresh).
+     * Replaces the need for a separate component calling window.crow('identify').
+     *
+     * @example
+     * ```tsx
+     * getIdentityToken={async () => {
+     *   const res = await fetch('/api/crow-token');
+     *   const { token } = await res.json();
+     *   return token;
+     * }}
+     * ```
+     */
+    getIdentityToken?: () => Promise<string>;
+    /**
+     * Page context data sent with every message. Reactive — updates whenever
+     * the object reference changes. Replaces window.crow('setContext', ...).
+     *
+     * @example
+     * ```tsx
+     * context={{ cmsContentItemId: "abc-123", agentBlogId: "def-456" }}
+     * ```
+     */
+    context?: Record<string, unknown>;
 }
-declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, }: 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, toolRenderers, getIdentityToken, context, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -742,6 +778,8 @@ interface UseCopilotStylesResult {
     error: Error | null;
     /** Agent name from product config */
     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 */

package/dist/index.js

@@ -1279,6 +1279,9 @@ function useCopilotStyles({
   const [agentName, setAgentName] = useState(
     styleCache.get(key)?.agentName || "Assistant"
   );
+  const [browserUseEnabled, setBrowserUseEnabled] = useState(
+    styleCache.get(key)?.browserUseEnabled || false
+  );
   const [pageNavigationEnabled, setPageNavigationEnabled] = useState(
     styleCache.get(key)?.pageNavigationEnabled || false
   );
@@ -1302,6 +1305,7 @@ function useCopilotStyles({
       styleCache.set(key, config);
       setDbStyles(config.copilotStyles);
       setAgentName(config.agentName || "Assistant");
+      setBrowserUseEnabled(config.browserUseEnabled || false);
       setPageNavigationEnabled(config.pageNavigationEnabled || false);
       setPageNavigationRoutes(config.pageNavigationRoutes || []);
       setPersistAnonymousConversations(config.persistAnonymousConversations ?? true);
@@ -1320,6 +1324,7 @@ function useCopilotStyles({
     if (cached) {
       setDbStyles(cached.copilotStyles);
       setAgentName(cached.agentName || "Assistant");
+      setBrowserUseEnabled(cached.browserUseEnabled || false);
       setPageNavigationEnabled(cached.pageNavigationEnabled || false);
       setPageNavigationRoutes(cached.pageNavigationRoutes || []);
       setPersistAnonymousConversations(cached.persistAnonymousConversations ?? true);
@@ -1337,6 +1342,7 @@ function useCopilotStyles({
     isLoading,
     error,
     agentName,
+    browserUseEnabled,
     pageNavigationEnabled,
     pageNavigationRoutes,
     persistAnonymousConversations,
@@ -1822,7 +1828,14 @@ function ReasoningTrace({
   return /* @__PURE__ */ jsx("div", { className: "crow-flex crow-justify-start crow-mb-2 crow-w-full", children: /* @__PURE__ */ jsxs("div", { className: "crow-w-full crow-space-y-1.5", children: [
     isWaiting && !hasThinking && /* @__PURE__ */ jsx(WaitingIndicator, {}),
     hasThinking && /* @__PURE__ */ jsx(ThinkingBlock, { thinking, isComplete }),
-    toolCalls.map((tool) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tool, toolRenderers }, tool.id))
+    toolCalls.map((tool) => /* @__PURE__ */ jsx(
+      ToolCallBlock,
+      {
+        toolCall: tool,
+        toolRenderers
+      },
+      tool.id
+    ))
   ] }) });
 }
 function WaitingIndicator() {
@@ -2898,7 +2911,9 @@ function CrowWidget({
   onIdentify,
   tools,
   navigate,
-  onToolResult
+  onToolResult,
+  getIdentityToken,
+  context
 }) {
   const {
     styles,
@@ -3076,6 +3091,35 @@ function CrowWidget({
       onIdentify(identify);
     }
   }, [isLoadingStyles, onIdentify]);
+  useEffect(() => {
+    if (!getIdentityToken || isLoadingStyles) return;
+    let cancelled = false;
+    const identify = async () => {
+      try {
+        const token = await getIdentityToken();
+        if (!cancelled && token) {
+          window.crow?.("identify", { token });
+        }
+      } catch (e) {
+        console.error("[Crow] getIdentityToken failed:", e);
+      }
+    };
+    identify();
+    const handleRefresh = () => identify();
+    window.addEventListener("crow:token-refresh-needed", handleRefresh);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("crow:token-refresh-needed", handleRefresh);
+    };
+  }, [getIdentityToken, isLoadingStyles]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (context && Object.keys(context).length > 0) {
+      window.__crow_page_context = context;
+    } else {
+      window.__crow_page_context = void 0;
+    }
+  }, [context]);
   const handleBrowserConfirmation = useCallback(
     (instruction) => {
       return new Promise((resolve) => {
@@ -3437,12 +3481,15 @@ function CrowCopilot({
   onReady,
   navigate,
   onToolResult,
-  toolRenderers
+  toolRenderers,
+  getIdentityToken,
+  context
 }) {
   const {
     styles,
     isLoading: isLoadingStyles,
     agentName: agentNameFromAPI,
+    browserUseEnabled,
     pageNavigationEnabled,
     pageNavigationRoutes,
     persistAnonymousConversations,
@@ -3457,6 +3504,20 @@ function CrowCopilot({
   const agentName = agentNameProp ?? agentNameFromAPI ?? title;
   const welcomeMessage = welcomeMessageProp ?? welcomeMessageFromAPI;
   const [autoTools, setAutoTools] = useState({});
+  const browserUseLoaded = autoTools.browser_use;
+  useEffect(() => {
+    if (browserUseEnabled && !isLoadingStyles && !browserUseLoaded) {
+      import('@usecrow/client/browser').then(({ createBrowserUseTool }) => {
+        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, browserUseLoaded]);
   useEffect(() => {
     if (pageNavigationEnabled && pageNavigationRoutes.length > 0 && !isLoadingStyles) {
       import('@usecrow/client').then(({ createNavigateToPageTool }) => {
@@ -3489,8 +3550,10 @@ function CrowCopilot({
   const [activeLocalTabId, setActiveLocalTabId] = useState("local-1");
   const [localTabMessages, setLocalTabMessages] = useState({});
   const [localTabCounter, setLocalTabCounter] = useState(1);
+  const [isBrowserUseActive, setIsBrowserUseActive] = useState(false);
   const [pendingConfirmation, setPendingConfirmation] = useState(null);
-  const [pendingQuestion, setPendingQuestion] = useState(null);
+  const [askUserResolver, setAskUserResolver] = useState(null);
+  const [browserQuestion, setBrowserQuestion] = useState(null);
   const conversations = useConversations({ productId, apiUrl });
   const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
   const hasRestoredHistoryRef = useRef(false);
@@ -3631,10 +3694,25 @@ function CrowCopilot({
   );
   const handleBrowserQuestion = useCallback(
     (question) => {
-      return new Promise((resolve) => {
-        setPendingQuestion({ question, resolve });
+      return new Promise((resolve, reject) => {
+        setAskUserResolver((prev) => {
+          if (prev) {
+            prev.reject(new Error("Superseded by new browser question"));
+          }
+          return { resolve, reject };
+        });
+        setBrowserQuestion(question);
+        chat.addMessage("assistant", question);
       });
     },
+    [chat]
+  );
+  const handleBrowserProgress = useCallback(
+    (step, maxSteps) => {
+      if (step >= maxSteps || step === -1) {
+        setIsBrowserUseActive(false);
+      }
+    },
     []
   );
   const handleExitWorkflow = async () => {
@@ -3643,21 +3721,79 @@ function CrowCopilot({
   useEffect(() => {
     window.__crow_browser_callbacks = {
       onConfirmation: handleBrowserConfirmation,
-      onQuestion: handleBrowserQuestion
+      onQuestion: handleBrowserQuestion,
+      onProgress: handleBrowserProgress
     };
     return () => {
       delete window.__crow_browser_callbacks;
     };
-  }, [handleBrowserConfirmation, handleBrowserQuestion]);
+  }, [handleBrowserConfirmation, handleBrowserQuestion, handleBrowserProgress]);
   useEffect(() => {
     if (!isLoadingStyles) {
       onReady?.();
     }
   }, [isLoadingStyles, onReady]);
+  useEffect(() => {
+    if (!getIdentityToken || isLoadingStyles) return;
+    let cancelled = false;
+    const identify = async () => {
+      try {
+        const token = await getIdentityToken();
+        if (!cancelled && token) {
+          window.crow?.("identify", { token });
+        }
+      } catch (e) {
+        console.error("[Crow] getIdentityToken failed:", e);
+      }
+    };
+    identify();
+    const handleRefresh = () => identify();
+    window.addEventListener("crow:token-refresh-needed", handleRefresh);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("crow:token-refresh-needed", handleRefresh);
+    };
+  }, [getIdentityToken, isLoadingStyles]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (context && Object.keys(context).length > 0) {
+      window.__crow_page_context = context;
+    } else {
+      window.__crow_page_context = void 0;
+    }
+  }, [context]);
   const handleSend = (message) => {
     if (!message.trim()) return;
+    if (askUserResolver) {
+      chat.addMessage("user", message);
+      askUserResolver.resolve(message);
+      setAskUserResolver(null);
+      setBrowserQuestion(null);
+      return;
+    }
     chat.sendMessage(message);
   };
+  const handleStop = () => {
+    chat.stopGeneration();
+    const currentResolver = askUserResolver;
+    setAskUserResolver(null);
+    setBrowserQuestion(null);
+    if (browserUseEnabled && isBrowserUseActive) {
+      import('@usecrow/client/browser').then(({ stopActiveBrowserUse }) => {
+        stopActiveBrowserUse();
+        currentResolver?.reject(new Error("Stopped by user"));
+      }).catch(() => {
+        currentResolver?.reject(new Error("Stopped by user"));
+      });
+      setIsBrowserUseActive(false);
+    } else if (currentResolver) {
+      currentResolver.reject(new Error("Stopped by user"));
+    }
+    if (pendingConfirmation) {
+      pendingConfirmation.resolve(false);
+      setPendingConfirmation(null);
+    }
+  };
   const handleNewChat = () => {
     if (!isVerifiedUser) {
       setLocalTabMessages((prev) => ({
@@ -3997,13 +4133,14 @@ function CrowCopilot({
                   }
                 }
               ) }),
-              pendingQuestion && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
+              askUserResolver && browserQuestion && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
                 BrowserUseQuestion,
                 {
-                  question: pendingQuestion.question,
+                  question: browserQuestion,
                   onSubmit: (answer) => {
-                    pendingQuestion.resolve(answer);
-                    setPendingQuestion(null);
+                    askUserResolver.resolve(answer);
+                    setAskUserResolver(null);
+                    setBrowserQuestion(null);
                   }
                 }
               ) })
@@ -4019,7 +4156,7 @@ function CrowCopilot({
                     PromptInputBox,
                     {
                       onSend: handleSend,
-                      onStop: chat.stopGeneration,
+                      onStop: handleStop,
                       placeholder: "Ask anything...",
                       isLoading: chat.isLoading
                     }