@usecrow/ui 0.1.41 → 0.1.43

package/dist/index.d.cts

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

@@ -778,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() {
@@ -3155,6 +3168,19 @@ function CrowWidget({
       });
     }
   }, [browserUseEnabled, isLoadingStyles, productId, apiUrl, autoTools]);
+  useEffect(() => {
+    if (browserUseEnabled && !isLoadingStyles && !autoTools.execute_recorded_workflow) {
+      import('@usecrow/client/browser').then(({ createExecuteRecordedWorkflowTool }) => {
+        setAutoTools((prev) => ({
+          ...prev,
+          execute_recorded_workflow: createExecuteRecordedWorkflowTool({ productId, apiUrl })
+        }));
+        console.log("[Crow] execute_recorded_workflow tool auto-loaded");
+      }).catch((err) => {
+        console.warn("[Crow] Failed to load execute_recorded_workflow:", err);
+      });
+    }
+  }, [browserUseEnabled, isLoadingStyles, productId, apiUrl, autoTools]);
   useEffect(() => {
     if (pageNavigationEnabled && pageNavigationRoutes.length > 0 && !isLoadingStyles) {
       import('@usecrow/client').then(({ createNavigateToPageTool }) => {
@@ -3476,6 +3502,7 @@ function CrowCopilot({
     styles,
     isLoading: isLoadingStyles,
     agentName: agentNameFromAPI,
+    browserUseEnabled,
     pageNavigationEnabled,
     pageNavigationRoutes,
     persistAnonymousConversations,
@@ -3490,6 +3517,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 }) => {
@@ -3522,8 +3563,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);
@@ -3664,10 +3707,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 () => {
@@ -3676,12 +3734,13 @@ 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?.();
@@ -3718,8 +3777,36 @@ function CrowCopilot({
   }, [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) => ({
@@ -4059,13 +4146,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);
                   }
                 }
               ) })
@@ -4081,7 +4169,7 @@ function CrowCopilot({
                     PromptInputBox,
                     {
                       onSend: handleSend,
-                      onStop: chat.stopGeneration,
+                      onStop: handleStop,
                       placeholder: "Ask anything...",
                       isLoading: chat.isLoading
                     }