@usecrow/ui 0.1.41 → 0.1.42

package/dist/index.cjs

@@ -1305,6 +1305,9 @@ function useCopilotStyles({
   const [agentName, setAgentName] = React3.useState(
     styleCache.get(key)?.agentName || "Assistant"
   );
+  const [browserUseEnabled, setBrowserUseEnabled] = React3.useState(
+    styleCache.get(key)?.browserUseEnabled || false
+  );
   const [pageNavigationEnabled, setPageNavigationEnabled] = React3.useState(
     styleCache.get(key)?.pageNavigationEnabled || false
   );
@@ -1328,6 +1331,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);
@@ -1346,6 +1350,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);
@@ -1363,6 +1368,7 @@ function useCopilotStyles({
     isLoading,
     error,
     agentName,
+    browserUseEnabled,
     pageNavigationEnabled,
     pageNavigationRoutes,
     persistAnonymousConversations,
@@ -1848,7 +1854,14 @@ function ReasoningTrace({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-flex crow-justify-start crow-mb-2 crow-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "crow-w-full crow-space-y-1.5", children: [
     isWaiting && !hasThinking && /* @__PURE__ */ jsxRuntime.jsx(WaitingIndicator, {}),
     hasThinking && /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlock, { thinking, isComplete }),
-    toolCalls.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBlock, { toolCall: tool, toolRenderers }, tool.id))
+    toolCalls.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(
+      ToolCallBlock,
+      {
+        toolCall: tool,
+        toolRenderers
+      },
+      tool.id
+    ))
   ] }) });
 }
 function WaitingIndicator() {
@@ -3502,6 +3515,7 @@ function CrowCopilot({
     styles,
     isLoading: isLoadingStyles,
     agentName: agentNameFromAPI,
+    browserUseEnabled,
     pageNavigationEnabled,
     pageNavigationRoutes,
     persistAnonymousConversations,
@@ -3516,6 +3530,20 @@ function CrowCopilot({
   const agentName = agentNameProp ?? agentNameFromAPI ?? title;
   const welcomeMessage = welcomeMessageProp ?? welcomeMessageFromAPI;
   const [autoTools, setAutoTools] = React3.useState({});
+  const browserUseLoaded = autoTools.browser_use;
+  React3.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]);
   React3.useEffect(() => {
     if (pageNavigationEnabled && pageNavigationRoutes.length > 0 && !isLoadingStyles) {
       import('@usecrow/client').then(({ createNavigateToPageTool }) => {
@@ -3548,8 +3576,10 @@ function CrowCopilot({
   const [activeLocalTabId, setActiveLocalTabId] = React3.useState("local-1");
   const [localTabMessages, setLocalTabMessages] = React3.useState({});
   const [localTabCounter, setLocalTabCounter] = React3.useState(1);
+  const [isBrowserUseActive, setIsBrowserUseActive] = React3.useState(false);
   const [pendingConfirmation, setPendingConfirmation] = React3.useState(null);
-  const [pendingQuestion, setPendingQuestion] = React3.useState(null);
+  const [askUserResolver, setAskUserResolver] = React3.useState(null);
+  const [browserQuestion, setBrowserQuestion] = React3.useState(null);
   const conversations = useConversations({ productId, apiUrl });
   const [shouldRestoreHistory, setShouldRestoreHistory] = React3.useState(false);
   const hasRestoredHistoryRef = React3.useRef(false);
@@ -3690,10 +3720,25 @@ function CrowCopilot({
   );
   const handleBrowserQuestion = React3.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 = React3.useCallback(
+    (step, maxSteps) => {
+      if (step >= maxSteps || step === -1) {
+        setIsBrowserUseActive(false);
+      }
+    },
     []
   );
   const handleExitWorkflow = async () => {
@@ -3702,12 +3747,13 @@ function CrowCopilot({
   React3.useEffect(() => {
     window.__crow_browser_callbacks = {
       onConfirmation: handleBrowserConfirmation,
-      onQuestion: handleBrowserQuestion
+      onQuestion: handleBrowserQuestion,
+      onProgress: handleBrowserProgress
     };
     return () => {
       delete window.__crow_browser_callbacks;
     };
-  }, [handleBrowserConfirmation, handleBrowserQuestion]);
+  }, [handleBrowserConfirmation, handleBrowserQuestion, handleBrowserProgress]);
   React3.useEffect(() => {
     if (!isLoadingStyles) {
       onReady?.();
@@ -3744,8 +3790,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) => ({
@@ -4085,13 +4159,14 @@ function CrowCopilot({
                   }
                 }
               ) }),
-              pendingQuestion && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              askUserResolver && browserQuestion && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
                 BrowserUseQuestion,
                 {
-                  question: pendingQuestion.question,
+                  question: browserQuestion,
                   onSubmit: (answer) => {
-                    pendingQuestion.resolve(answer);
-                    setPendingQuestion(null);
+                    askUserResolver.resolve(answer);
+                    setAskUserResolver(null);
+                    setBrowserQuestion(null);
                   }
                 }
               ) })
@@ -4107,7 +4182,7 @@ function CrowCopilot({
                     PromptInputBox,
                     {
                       onSend: handleSend,
-                      onStop: chat.stopGeneration,
+                      onStop: handleStop,
                       placeholder: "Ask anything...",
                       isLoading: chat.isLoading
                     }