@usecrow/ui 0.1.12 → 0.1.14

package/dist/index.cjs

@@ -1036,6 +1036,12 @@ function useWidgetStyles({
   const [agentName, setAgentName] = React3.useState(
     styleCache.get(key)?.agentName || "Assistant"
   );
+  const [browserUseEnabled, setBrowserUseEnabled] = React3.useState(
+    styleCache.get(key)?.browserUseEnabled || false
+  );
+  const [showThinking, setShowThinking] = React3.useState(
+    styleCache.get(key)?.showThinking ?? true
+  );
   const hasFetchedRef = React3.useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1046,6 +1052,8 @@ function useWidgetStyles({
       styleCache.set(key, config);
       setDbStyles(config.widgetStyles);
       setAgentName(config.agentName || "Assistant");
+      setBrowserUseEnabled(config.browserUseEnabled || false);
+      setShowThinking(config.showThinking ?? true);
     } catch (err) {
       console.error("[CrowWidget] Failed to fetch styles:", err);
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1059,6 +1067,8 @@ function useWidgetStyles({
     if (cached) {
       setDbStyles(cached.widgetStyles);
       setAgentName(cached.agentName || "Assistant");
+      setBrowserUseEnabled(cached.browserUseEnabled || false);
+      setShowThinking(cached.showThinking ?? true);
       setIsLoading(false);
       return;
     }
@@ -1071,6 +1081,8 @@ function useWidgetStyles({
     isLoading,
     error,
     agentName,
+    browserUseEnabled,
+    showThinking,
     refetch: fetchStyles
   };
 }
@@ -1151,11 +1163,12 @@ function WidgetStyleProvider({
   styles,
   agentName = "Assistant",
   isLoading = false,
-  variant = "floating"
+  variant = "floating",
+  showThinking = true
 }) {
   const value = React3.useMemo(
-    () => ({ styles, agentName, isLoading, variant }),
-    [styles, agentName, isLoading, variant]
+    () => ({ styles, agentName, isLoading, variant, showThinking }),
+    [styles, agentName, isLoading, variant, showThinking]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(WidgetStyleContext.Provider, { value, children });
 }
@@ -1172,6 +1185,10 @@ function useWidgetStyles2() {
   const context = React3.useContext(WidgetStyleContext);
   return context?.styles ?? DEFAULT_WIDGET_STYLES;
 }
+function useShowThinking() {
+  const context = React3.useContext(WidgetStyleContext);
+  return context?.showThinking ?? true;
+}
 var CopilotStyleContext = React3.createContext(
   null
 );
@@ -1545,10 +1562,6 @@ var THINKING_MESSAGES = [
   "Connecting",
   "Synthesizing"
 ];
-function getRandomThinkingMessage() {
-  const idx = Math.floor(Math.random() * THINKING_MESSAGES.length);
-  return THINKING_MESSAGES[idx] + "...";
-}
 function ShimmeringContent({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
@@ -1578,11 +1591,17 @@ function ReasoningTrace({
   thinking,
   isComplete,
   toolCalls = [],
-  isWaiting = false
+  isWaiting = false,
+  showDetails = true
 }) {
   const hasThinking = !!thinking && thinking.trim().length > 0;
   const hasToolCalls = toolCalls.length > 0;
+  const isActive = isWaiting || hasThinking && !isComplete || toolCalls.some((t) => t.status === "executing");
   if (!isWaiting && !hasThinking && !hasToolCalls) return null;
+  if (!showDetails) {
+    if (!isActive) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-flex crow-justify-start crow-mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-max-w-[90%]", children: /* @__PURE__ */ jsxRuntime.jsx(WaitingIndicator, {}) }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-flex crow-justify-start crow-mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "crow-max-w-[90%] crow-space-y-1.5", children: [
     isWaiting && !hasThinking && /* @__PURE__ */ jsxRuntime.jsx(WaitingIndicator, {}),
     hasThinking && /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlock, { thinking, isComplete }),
@@ -1590,9 +1609,19 @@ function ReasoningTrace({
   ] }) });
 }
 function WaitingIndicator() {
+  const [messageIndex, setMessageIndex] = React3.useState(
+    () => Math.floor(Math.random() * THINKING_MESSAGES.length)
+  );
+  React3.useEffect(() => {
+    const interval = setInterval(() => {
+      setMessageIndex((i) => (i + 1) % THINKING_MESSAGES.length);
+    }, 3e3);
+    return () => clearInterval(interval);
+  }, []);
+  const message = THINKING_MESSAGES[messageIndex] + "...";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "crow-flex crow-items-center crow-gap-1.5 crow-text-xs crow-text-gray-500", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: message }) })
   ] });
 }
 function ThinkingBlock({
@@ -1600,10 +1629,21 @@ function ThinkingBlock({
   isComplete
 }) {
   const [isExpanded, setIsExpanded] = React3.useState(!isComplete);
+  const [messageIndex, setMessageIndex] = React3.useState(
+    () => Math.floor(Math.random() * THINKING_MESSAGES.length)
+  );
   React3.useLayoutEffect(() => {
     setIsExpanded(!isComplete);
   }, [isComplete]);
+  React3.useEffect(() => {
+    if (isComplete) return;
+    const interval = setInterval(() => {
+      setMessageIndex((i) => (i + 1) % THINKING_MESSAGES.length);
+    }, 3e3);
+    return () => clearInterval(interval);
+  }, [isComplete]);
   const isInProgress = !isComplete;
+  const message = THINKING_MESSAGES[messageIndex] + "...";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "crow-flex crow-flex-col crow-gap-1 crow-text-xs", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -1612,7 +1652,7 @@ function ThinkingBlock({
         className: `crow-flex crow-items-center crow-gap-1.5 crow-select-none crow-transition-colors ${isInProgress ? "crow-text-gray-500" : "crow-text-gray-600 hover:crow-text-gray-800"} crow-cursor-pointer`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: isInProgress ? /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brain, { className: "crow-w-3.5 crow-h-3.5" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-font-medium", children: isInProgress ? /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) : "Thought" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-font-medium", children: isInProgress ? /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: message }) : "Thought" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
@@ -1698,6 +1738,7 @@ function MessageBubble({
   isLoading = false
 }) {
   const styles = useWidgetStyles2();
+  const showThinkingSetting = useShowThinking();
   const isWaiting = message.content === "Thinking..." || message.isBot && isLoading && !message.content;
   const hasThinking = message.isBot && message.thinking;
   const hasContent = message.content && message.content !== "Thinking...";
@@ -1716,7 +1757,8 @@ function MessageBubble({
             thinking: message.thinking,
             isComplete: message.thinkingComplete,
             toolCalls,
-            isWaiting: isWaiting && !hasThinking
+            isWaiting: isWaiting && !hasThinking,
+            showDetails: showThinkingSetting
           }
         ),
         hasContent && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2406,16 +2448,19 @@ function CrowWidget({
   variant = "floating",
   styles: propStyles,
   previewMode = false,
+  showThinking: showThinkingProp,
   onReady,
   onIdentify,
   tools
 }) {
-  const { styles, isLoading: isLoadingStyles, agentName } = useWidgetStyles({
+  const { styles, isLoading: isLoadingStyles, agentName, browserUseEnabled, showThinking: showThinkingFromAPI } = useWidgetStyles({
     productId,
     apiUrl,
     propStyles,
     skip: previewMode
   });
+  const showThinking = showThinkingProp ?? showThinkingFromAPI;
+  const [autoTools, setAutoTools] = React3.useState({});
   const cssVars = stylesToCssVars(styles);
   const messagesContainerRef = React3.useRef(null);
   const executeClientToolRef = React3.useRef(null);
@@ -2554,10 +2599,23 @@ function CrowWidget({
     }
   }, [isLoadingStyles, onIdentify]);
   React3.useEffect(() => {
-    if (tools && Object.keys(tools).length > 0) {
-      window.crow?.("registerTools", tools);
+    if (browserUseEnabled && !isLoadingStyles && Object.keys(autoTools).length === 0) {
+      import('@usecrow/client/browser').then(({ createBrowserUseTool }) => {
+        setAutoTools({
+          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]);
+  const mergedTools = { ...autoTools, ...tools };
+  React3.useEffect(() => {
+    if (Object.keys(mergedTools).length > 0) {
+      window.crow?.("registerTools", mergedTools);
     }
-  }, [tools]);
+  }, [mergedTools]);
   const handleSend = (message) => {
     if (!message.trim()) return;
     setIsCollapsed(false);
@@ -2648,6 +2706,7 @@ function CrowWidget({
       agentName,
       isLoading: isLoadingStyles,
       variant,
+      showThinking,
       children: [
         variant === "floating" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ChatBubble, { isExpanded: !isCollapsed, onClick: handleBubbleClick }),