@usecrow/ui 0.1.12 → 0.1.14

package/dist/index.d.cts

@@ -180,6 +180,8 @@ interface WidgetConfigResponse {
     agentName: string;
     widgetStyles: WidgetStyleConfig;
     copilotStyles: CopilotStyleConfig;
+    browserUseEnabled?: boolean;
+    showThinking?: boolean;
 }
 
 /** Identity data passed to the identify function */
@@ -208,6 +210,8 @@ interface CrowWidgetProps {
     styles?: Partial<WidgetStyleConfig>;
     /** Skip fetching styles from API (use for preview mode with local state) */
     previewMode?: boolean;
+    /** Whether to show AI thinking/reasoning to users (overrides API setting if provided) */
+    showThinking?: boolean;
     /** Callback when widget is ready */
     onReady?: () => void;
     /**
@@ -218,7 +222,7 @@ interface CrowWidgetProps {
     /** Client-side tools the agent can call */
     tools?: ToolsMap;
 }
-declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, onReady, onIdentify, tools, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, onReady, onIdentify, tools, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -628,6 +632,10 @@ interface UseWidgetStylesResult {
     error: Error | null;
     /** Agent name from product config */
     agentName: string;
+    /** Whether browser_use is enabled for this product */
+    browserUseEnabled: boolean;
+    /** Whether to show thinking/reasoning to users */
+    showThinking: boolean;
     /** Refetch styles from API */
     refetch: () => Promise<void>;
 }
@@ -706,6 +714,7 @@ interface WidgetStyleContextValue {
     agentName: string;
     isLoading: boolean;
     variant: "floating" | "embedded";
+    showThinking: boolean;
 }
 interface WidgetStyleProviderProps {
     children: react__default.ReactNode;
@@ -713,11 +722,12 @@ interface WidgetStyleProviderProps {
     agentName?: string;
     isLoading?: boolean;
     variant?: "floating" | "embedded";
+    showThinking?: boolean;
 }
 /**
  * Provider for widget styles
  */
-declare function WidgetStyleProvider({ children, styles, agentName, isLoading, variant, }: WidgetStyleProviderProps): react_jsx_runtime.JSX.Element;
+declare function WidgetStyleProvider({ children, styles, agentName, isLoading, variant, showThinking, }: WidgetStyleProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access widget styles from context
  *
@@ -789,8 +799,10 @@ interface ReasoningTraceProps {
     isComplete?: boolean;
     toolCalls?: ToolCall[];
     isWaiting?: boolean;
+    /** Whether to show detailed reasoning (text + tool calls). If false, only shows "Thinking..." indicator */
+    showDetails?: boolean;
 }
-declare function ReasoningTrace({ thinking, isComplete, toolCalls, isWaiting, }: ReasoningTraceProps): react_jsx_runtime.JSX.Element | null;
+declare function ReasoningTrace({ thinking, isComplete, toolCalls, isWaiting, showDetails, }: ReasoningTraceProps): react_jsx_runtime.JSX.Element | null;
 
 interface MessageBubbleProps {
     message: Message;

package/dist/index.d.ts

@@ -180,6 +180,8 @@ interface WidgetConfigResponse {
     agentName: string;
     widgetStyles: WidgetStyleConfig;
     copilotStyles: CopilotStyleConfig;
+    browserUseEnabled?: boolean;
+    showThinking?: boolean;
 }
 
 /** Identity data passed to the identify function */
@@ -208,6 +210,8 @@ interface CrowWidgetProps {
     styles?: Partial<WidgetStyleConfig>;
     /** Skip fetching styles from API (use for preview mode with local state) */
     previewMode?: boolean;
+    /** Whether to show AI thinking/reasoning to users (overrides API setting if provided) */
+    showThinking?: boolean;
     /** Callback when widget is ready */
     onReady?: () => void;
     /**
@@ -218,7 +222,7 @@ interface CrowWidgetProps {
     /** Client-side tools the agent can call */
     tools?: ToolsMap;
 }
-declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, onReady, onIdentify, tools, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, onReady, onIdentify, tools, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -628,6 +632,10 @@ interface UseWidgetStylesResult {
     error: Error | null;
     /** Agent name from product config */
     agentName: string;
+    /** Whether browser_use is enabled for this product */
+    browserUseEnabled: boolean;
+    /** Whether to show thinking/reasoning to users */
+    showThinking: boolean;
     /** Refetch styles from API */
     refetch: () => Promise<void>;
 }
@@ -706,6 +714,7 @@ interface WidgetStyleContextValue {
     agentName: string;
     isLoading: boolean;
     variant: "floating" | "embedded";
+    showThinking: boolean;
 }
 interface WidgetStyleProviderProps {
     children: react__default.ReactNode;
@@ -713,11 +722,12 @@ interface WidgetStyleProviderProps {
     agentName?: string;
     isLoading?: boolean;
     variant?: "floating" | "embedded";
+    showThinking?: boolean;
 }
 /**
  * Provider for widget styles
  */
-declare function WidgetStyleProvider({ children, styles, agentName, isLoading, variant, }: WidgetStyleProviderProps): react_jsx_runtime.JSX.Element;
+declare function WidgetStyleProvider({ children, styles, agentName, isLoading, variant, showThinking, }: WidgetStyleProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access widget styles from context
  *
@@ -789,8 +799,10 @@ interface ReasoningTraceProps {
     isComplete?: boolean;
     toolCalls?: ToolCall[];
     isWaiting?: boolean;
+    /** Whether to show detailed reasoning (text + tool calls). If false, only shows "Thinking..." indicator */
+    showDetails?: boolean;
 }
-declare function ReasoningTrace({ thinking, isComplete, toolCalls, isWaiting, }: ReasoningTraceProps): react_jsx_runtime.JSX.Element | null;
+declare function ReasoningTrace({ thinking, isComplete, toolCalls, isWaiting, showDetails, }: ReasoningTraceProps): react_jsx_runtime.JSX.Element | null;
 
 interface MessageBubbleProps {
     message: Message;

package/dist/index.js

@@ -1010,6 +1010,12 @@ function useWidgetStyles({
   const [agentName, setAgentName] = useState(
     styleCache.get(key)?.agentName || "Assistant"
   );
+  const [browserUseEnabled, setBrowserUseEnabled] = useState(
+    styleCache.get(key)?.browserUseEnabled || false
+  );
+  const [showThinking, setShowThinking] = useState(
+    styleCache.get(key)?.showThinking ?? true
+  );
   const hasFetchedRef = useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1020,6 +1026,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)));
@@ -1033,6 +1041,8 @@ function useWidgetStyles({
     if (cached) {
       setDbStyles(cached.widgetStyles);
       setAgentName(cached.agentName || "Assistant");
+      setBrowserUseEnabled(cached.browserUseEnabled || false);
+      setShowThinking(cached.showThinking ?? true);
       setIsLoading(false);
       return;
     }
@@ -1045,6 +1055,8 @@ function useWidgetStyles({
     isLoading,
     error,
     agentName,
+    browserUseEnabled,
+    showThinking,
     refetch: fetchStyles
   };
 }
@@ -1125,11 +1137,12 @@ function WidgetStyleProvider({
   styles,
   agentName = "Assistant",
   isLoading = false,
-  variant = "floating"
+  variant = "floating",
+  showThinking = true
 }) {
   const value = useMemo(
-    () => ({ styles, agentName, isLoading, variant }),
-    [styles, agentName, isLoading, variant]
+    () => ({ styles, agentName, isLoading, variant, showThinking }),
+    [styles, agentName, isLoading, variant, showThinking]
   );
   return /* @__PURE__ */ jsx(WidgetStyleContext.Provider, { value, children });
 }
@@ -1146,6 +1159,10 @@ function useWidgetStyles2() {
   const context = useContext(WidgetStyleContext);
   return context?.styles ?? DEFAULT_WIDGET_STYLES;
 }
+function useShowThinking() {
+  const context = useContext(WidgetStyleContext);
+  return context?.showThinking ?? true;
+}
 var CopilotStyleContext = createContext(
   null
 );
@@ -1519,10 +1536,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__ */ jsxs(
     "span",
@@ -1552,11 +1565,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__ */ jsx("div", { className: "crow-flex crow-justify-start crow-mb-2", children: /* @__PURE__ */ jsx("div", { className: "crow-max-w-[90%]", children: /* @__PURE__ */ jsx(WaitingIndicator, {}) }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: "crow-flex crow-justify-start crow-mb-2", children: /* @__PURE__ */ jsxs("div", { className: "crow-max-w-[90%] crow-space-y-1.5", children: [
     isWaiting && !hasThinking && /* @__PURE__ */ jsx(WaitingIndicator, {}),
     hasThinking && /* @__PURE__ */ jsx(ThinkingBlock, { thinking, isComplete }),
@@ -1564,9 +1583,19 @@ function ReasoningTrace({
   ] }) });
 }
 function WaitingIndicator() {
+  const [messageIndex, setMessageIndex] = useState(
+    () => Math.floor(Math.random() * THINKING_MESSAGES.length)
+  );
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMessageIndex((i) => (i + 1) % THINKING_MESSAGES.length);
+    }, 3e3);
+    return () => clearInterval(interval);
+  }, []);
+  const message = THINKING_MESSAGES[messageIndex] + "...";
   return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1.5 crow-text-xs crow-text-gray-500", children: [
     /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) }),
-    /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
+    /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: message }) })
   ] });
 }
 function ThinkingBlock({
@@ -1574,10 +1603,21 @@ function ThinkingBlock({
   isComplete
 }) {
   const [isExpanded, setIsExpanded] = useState(!isComplete);
+  const [messageIndex, setMessageIndex] = useState(
+    () => Math.floor(Math.random() * THINKING_MESSAGES.length)
+  );
   useLayoutEffect(() => {
     setIsExpanded(!isComplete);
   }, [isComplete]);
+  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__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-gap-1 crow-text-xs", children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -1586,7 +1626,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__ */ jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) : /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }),
-          /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) : "Thought" }),
+          /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: message }) : "Thought" }),
           /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -1672,6 +1712,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...";
@@ -1690,7 +1731,8 @@ function MessageBubble({
             thinking: message.thinking,
             isComplete: message.thinkingComplete,
             toolCalls,
-            isWaiting: isWaiting && !hasThinking
+            isWaiting: isWaiting && !hasThinking,
+            showDetails: showThinkingSetting
           }
         ),
         hasContent && /* @__PURE__ */ jsxs(
@@ -2380,16 +2422,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] = useState({});
   const cssVars = stylesToCssVars(styles);
   const messagesContainerRef = useRef(null);
   const executeClientToolRef = useRef(null);
@@ -2528,10 +2573,23 @@ function CrowWidget({
     }
   }, [isLoadingStyles, onIdentify]);
   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 };
+  useEffect(() => {
+    if (Object.keys(mergedTools).length > 0) {
+      window.crow?.("registerTools", mergedTools);
     }
-  }, [tools]);
+  }, [mergedTools]);
   const handleSend = (message) => {
     if (!message.trim()) return;
     setIsCollapsed(false);
@@ -2622,6 +2680,7 @@ function CrowWidget({
       agentName,
       isLoading: isLoadingStyles,
       variant,
+      showThinking,
       children: [
         variant === "floating" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ChatBubble, { isExpanded: !isCollapsed, onClick: handleBubbleClick }),