@usecrow/ui 0.1.42 → 0.1.44

package/dist/index.d.cts

@@ -198,65 +198,6 @@ interface WidgetConfigResponse {
     }>;
 }
 
-/** Identity data passed to the identify function */
-interface IdentifyData {
-    /** JWT token from your backend */
-    token: string;
-    /** User's display name */
-    name?: string;
-    /** Additional metadata */
-    [key: string]: unknown;
-}
-/** Function to identify a user */
-type IdentifyFunction = (data: IdentifyData) => void;
-/** Client-side tool handler */
-type ToolHandler = (args: Record<string, unknown>) => Promise<unknown> | unknown;
-/** Map of tool names to handlers */
-type ToolsMap = Record<string, ToolHandler>;
-interface CrowWidgetProps {
-    /** Product ID for this widget */
-    productId: string;
-    /** API URL (defaults to relative path) */
-    apiUrl?: string;
-    /** Widget variant: floating (with bubble) or embedded (for preview) */
-    variant?: "floating" | "embedded";
-    /** Custom styles to override DB and default styles */
-    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;
-    /** Custom agent name shown in header (overrides API setting if provided) */
-    agentName?: string;
-    /** Custom welcome message (overrides API setting if provided) */
-    welcomeMessage?: string;
-    /** Callback when widget is ready */
-    onReady?: () => void;
-    /**
-     * Callback to identify the user. Called with an identify function
-     * that you should call with the user's token when available.
-     */
-    onIdentify?: (identify: IdentifyFunction) => void;
-    /** Client-side tools the agent can call */
-    tools?: ToolsMap;
-    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
-    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, getIdentityToken, context, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Shared TypeScript interfaces for the widget and copilot
  */
@@ -300,14 +241,18 @@ interface ToolCall {
     timestamp: Date;
 }
 /**
- * Map of tool name → custom React renderer.
- * When a tool completes and a renderer exists for its name,
- * the widget renders that component inline instead of the default status.
+ * Map of tool name → custom renderer for inline tool results.
+ *
+ * Return types:
+ * - ReactNode (React SDK) — rendered directly
+ * - string (script tag) — sanitized HTML rendered via innerHTML
+ * - HTMLElement (script tag) — mounted into a container (for Chart.js, D3, etc.)
  */
+type ToolRendererResult = ReactNode | string | HTMLElement;
 type ToolRenderers = Record<string, (props: {
     result: unknown;
     status: string;
-}) => ReactNode>;
+}) => ToolRendererResult>;
 interface WorkflowTodo {
     id: string;
     text: string;
@@ -359,9 +304,76 @@ declare global {
         __crow_journey_callback?: (event: JourneyEvent) => void;
         __crow_client_tools?: Record<string, ClientToolHandler>;
         __crow_page_context?: Record<string, unknown>;
+        __crow_identity_token_fetcher?: () => Promise<string>;
+        __crow_on_tool_result?: (toolName: string, result: Record<string, unknown>) => void;
+        __crow_tool_renderers?: ToolRenderers;
     }
 }
 
+/** Identity data passed to the identify function */
+interface IdentifyData {
+    /** JWT token from your backend */
+    token: string;
+    /** User's display name */
+    name?: string;
+    /** Additional metadata */
+    [key: string]: unknown;
+}
+/** Function to identify a user */
+type IdentifyFunction = (data: IdentifyData) => void;
+/** Client-side tool handler */
+type ToolHandler = (args: Record<string, unknown>) => Promise<unknown> | unknown;
+/** Map of tool names to handlers */
+type ToolsMap = Record<string, ToolHandler>;
+interface CrowWidgetProps {
+    /** Product ID for this widget */
+    productId: string;
+    /** API URL (defaults to relative path) */
+    apiUrl?: string;
+    /** Widget variant: floating (with bubble) or embedded (for preview) */
+    variant?: "floating" | "embedded";
+    /** Custom styles to override DB and default styles */
+    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;
+    /** Custom agent name shown in header (overrides API setting if provided) */
+    agentName?: string;
+    /** Custom welcome message (overrides API setting if provided) */
+    welcomeMessage?: string;
+    /** Callback when widget is ready */
+    onReady?: () => void;
+    /**
+     * Callback to identify the user. Called with an identify function
+     * that you should call with the user's token when available.
+     */
+    onIdentify?: (identify: IdentifyFunction) => void;
+    /** Client-side tools the agent can call */
+    tools?: ToolsMap;
+    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
+    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>;
+    /**
+     * Custom renderers for tool results. When a tool completes and a renderer
+     * exists for its name, that component is rendered inline in the chat.
+     */
+    toolRenderers?: ToolRenderers;
+}
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+
 interface CrowCopilotProps {
     /** Product ID for this copilot */
     productId: string;

package/dist/index.d.ts

@@ -198,65 +198,6 @@ interface WidgetConfigResponse {
     }>;
 }
 
-/** Identity data passed to the identify function */
-interface IdentifyData {
-    /** JWT token from your backend */
-    token: string;
-    /** User's display name */
-    name?: string;
-    /** Additional metadata */
-    [key: string]: unknown;
-}
-/** Function to identify a user */
-type IdentifyFunction = (data: IdentifyData) => void;
-/** Client-side tool handler */
-type ToolHandler = (args: Record<string, unknown>) => Promise<unknown> | unknown;
-/** Map of tool names to handlers */
-type ToolsMap = Record<string, ToolHandler>;
-interface CrowWidgetProps {
-    /** Product ID for this widget */
-    productId: string;
-    /** API URL (defaults to relative path) */
-    apiUrl?: string;
-    /** Widget variant: floating (with bubble) or embedded (for preview) */
-    variant?: "floating" | "embedded";
-    /** Custom styles to override DB and default styles */
-    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;
-    /** Custom agent name shown in header (overrides API setting if provided) */
-    agentName?: string;
-    /** Custom welcome message (overrides API setting if provided) */
-    welcomeMessage?: string;
-    /** Callback when widget is ready */
-    onReady?: () => void;
-    /**
-     * Callback to identify the user. Called with an identify function
-     * that you should call with the user's token when available.
-     */
-    onIdentify?: (identify: IdentifyFunction) => void;
-    /** Client-side tools the agent can call */
-    tools?: ToolsMap;
-    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
-    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, getIdentityToken, context, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Shared TypeScript interfaces for the widget and copilot
  */
@@ -300,14 +241,18 @@ interface ToolCall {
     timestamp: Date;
 }
 /**
- * Map of tool name → custom React renderer.
- * When a tool completes and a renderer exists for its name,
- * the widget renders that component inline instead of the default status.
+ * Map of tool name → custom renderer for inline tool results.
+ *
+ * Return types:
+ * - ReactNode (React SDK) — rendered directly
+ * - string (script tag) — sanitized HTML rendered via innerHTML
+ * - HTMLElement (script tag) — mounted into a container (for Chart.js, D3, etc.)
  */
+type ToolRendererResult = ReactNode | string | HTMLElement;
 type ToolRenderers = Record<string, (props: {
     result: unknown;
     status: string;
-}) => ReactNode>;
+}) => ToolRendererResult>;
 interface WorkflowTodo {
     id: string;
     text: string;
@@ -359,9 +304,76 @@ declare global {
         __crow_journey_callback?: (event: JourneyEvent) => void;
         __crow_client_tools?: Record<string, ClientToolHandler>;
         __crow_page_context?: Record<string, unknown>;
+        __crow_identity_token_fetcher?: () => Promise<string>;
+        __crow_on_tool_result?: (toolName: string, result: Record<string, unknown>) => void;
+        __crow_tool_renderers?: ToolRenderers;
     }
 }
 
+/** Identity data passed to the identify function */
+interface IdentifyData {
+    /** JWT token from your backend */
+    token: string;
+    /** User's display name */
+    name?: string;
+    /** Additional metadata */
+    [key: string]: unknown;
+}
+/** Function to identify a user */
+type IdentifyFunction = (data: IdentifyData) => void;
+/** Client-side tool handler */
+type ToolHandler = (args: Record<string, unknown>) => Promise<unknown> | unknown;
+/** Map of tool names to handlers */
+type ToolsMap = Record<string, ToolHandler>;
+interface CrowWidgetProps {
+    /** Product ID for this widget */
+    productId: string;
+    /** API URL (defaults to relative path) */
+    apiUrl?: string;
+    /** Widget variant: floating (with bubble) or embedded (for preview) */
+    variant?: "floating" | "embedded";
+    /** Custom styles to override DB and default styles */
+    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;
+    /** Custom agent name shown in header (overrides API setting if provided) */
+    agentName?: string;
+    /** Custom welcome message (overrides API setting if provided) */
+    welcomeMessage?: string;
+    /** Callback when widget is ready */
+    onReady?: () => void;
+    /**
+     * Callback to identify the user. Called with an identify function
+     * that you should call with the user's token when available.
+     */
+    onIdentify?: (identify: IdentifyFunction) => void;
+    /** Client-side tools the agent can call */
+    tools?: ToolsMap;
+    /** Custom navigation function for SPA-safe page navigation (e.g. router.push from Next.js or React Router) */
+    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>;
+    /**
+     * Custom renderers for tool results. When a tool completes and a renderer
+     * exists for its name, that component is rendered inline in the chat.
+     */
+    toolRenderers?: ToolRenderers;
+}
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+
 interface CrowCopilotProps {
     /** Product ID for this copilot */
     productId: string;

package/dist/index.js

@@ -879,11 +879,44 @@ function useCrowAPI({ onIdentified, onReset } = {}) {
           window.__crow_page_context = void 0;
           console.log("[Crow] Context cleared");
           break;
+        case "setIdentityTokenFetcher":
+          if (typeof opts !== "function") {
+            console.error("[Crow] setIdentityTokenFetcher() requires a function");
+            return;
+          }
+          window.__crow_identity_token_fetcher = opts;
+          console.log("[Crow] Identity token fetcher registered");
+          break;
+        case "onToolResult":
+          if (typeof opts !== "function") {
+            console.error("[Crow] onToolResult() requires a function");
+            return;
+          }
+          window.__crow_on_tool_result = opts;
+          console.log("[Crow] onToolResult callback registered");
+          break;
+        case "registerToolRenderers":
+          if (!opts || typeof opts !== "object") {
+            console.error("[Crow] registerToolRenderers() requires an object");
+            return;
+          }
+          window.__crow_tool_renderers = {
+            ...window.__crow_tool_renderers || {},
+            ...opts
+          };
+          console.log("[Crow] Tool renderers registered");
+          break;
         default:
           console.warn(`[Crow] Unknown command: ${command}`);
       }
     };
     console.log("[Crow] API ready");
+    const queue = window.__crow_queue;
+    if (queue?.length) {
+      console.log(`[Crow] Replaying ${queue.length} queued command(s)`);
+      queue.forEach(([cmd, opts]) => window.crow(cmd, opts));
+      window.__crow_queue = void 0;
+    }
     const handleIdentified = () => onIdentifiedRef.current?.();
     const handleReset = () => onResetRef.current?.();
     window.addEventListener("crow:identified", handleIdentified);
@@ -1915,6 +1948,23 @@ function ThinkingBlock({
     ) })
   ] });
 }
+function RenderedToolResult({ renderer, result, status }) {
+  const domRef = useRef(null);
+  const rendered = renderer({ result, status });
+  useEffect(() => {
+    if (domRef.current && rendered instanceof HTMLElement) {
+      domRef.current.innerHTML = "";
+      domRef.current.appendChild(rendered);
+    }
+  }, [rendered]);
+  if (rendered instanceof HTMLElement) {
+    return /* @__PURE__ */ jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", ref: domRef });
+  }
+  if (typeof rendered === "string") {
+    return /* @__PURE__ */ jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", dangerouslySetInnerHTML: { __html: rendered } });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", children: rendered });
+}
 function ToolCallBlock({
   toolCall,
   toolRenderers
@@ -1954,7 +2004,7 @@ function ToolCallBlock({
         ]
       }
     ),
-    hasCustomRender && /* @__PURE__ */ jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", children: customRenderer({ result: toolCall.result, status: toolCall.status }) }),
+    hasCustomRender && /* @__PURE__ */ jsx(RenderedToolResult, { renderer: customRenderer, result: toolCall.result, status: toolCall.status }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && hasArgs && /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -2913,8 +2963,12 @@ function CrowWidget({
   navigate,
   onToolResult,
   getIdentityToken,
-  context
+  context,
+  toolRenderers
 }) {
+  const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
+  const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
+  const effectiveToolRenderers = toolRenderers || window.__crow_tool_renderers;
   const {
     styles,
     isLoading: isLoadingStyles,
@@ -2993,7 +3047,7 @@ function CrowWidget({
           break;
       }
     },
-    onToolResult,
+    onToolResult: effectiveOnToolResult,
     onToolCall: async (event) => {
       if (event.type === "client_call" && event.toolName && event.toolCallId) {
         try {
@@ -3092,11 +3146,11 @@ function CrowWidget({
     }
   }, [isLoadingStyles, onIdentify]);
   useEffect(() => {
-    if (!getIdentityToken || isLoadingStyles) return;
+    if (!effectiveGetIdentityToken || isLoadingStyles) return;
     let cancelled = false;
     const identify = async () => {
       try {
-        const token = await getIdentityToken();
+        const token = await effectiveGetIdentityToken();
         if (!cancelled && token) {
           window.crow?.("identify", { token });
         }
@@ -3111,7 +3165,7 @@ function CrowWidget({
       cancelled = true;
       window.removeEventListener("crow:token-refresh-needed", handleRefresh);
     };
-  }, [getIdentityToken, isLoadingStyles]);
+  }, [effectiveGetIdentityToken, isLoadingStyles]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     if (context && Object.keys(context).length > 0) {
@@ -3168,6 +3222,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 }) => {
@@ -3285,7 +3352,8 @@ function CrowWidget({
           messages: chat.messages,
           activeToolCalls: chat.activeToolCalls,
           isLoadingHistory: conversations.isLoadingHistory,
-          isGenerating: chat.isLoading
+          isGenerating: chat.isLoading,
+          toolRenderers: effectiveToolRenderers
         }
       ),
       pendingConfirmation && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
@@ -3485,6 +3553,9 @@ function CrowCopilot({
   getIdentityToken,
   context
 }) {
+  const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
+  const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
+  const effectiveToolRenderers = toolRenderers || window.__crow_tool_renderers;
   const {
     styles,
     isLoading: isLoadingStyles,
@@ -3588,7 +3659,7 @@ function CrowCopilot({
           break;
       }
     },
-    onToolResult,
+    onToolResult: effectiveOnToolResult,
     onToolCall: async (event) => {
       if (event.type === "client_call" && event.toolName && event.toolCallId) {
         try {
@@ -3734,11 +3805,11 @@ function CrowCopilot({
     }
   }, [isLoadingStyles, onReady]);
   useEffect(() => {
-    if (!getIdentityToken || isLoadingStyles) return;
+    if (!effectiveGetIdentityToken || isLoadingStyles) return;
     let cancelled = false;
     const identify = async () => {
       try {
-        const token = await getIdentityToken();
+        const token = await effectiveGetIdentityToken();
         if (!cancelled && token) {
           window.crow?.("identify", { token });
         }
@@ -3753,7 +3824,7 @@ function CrowCopilot({
       cancelled = true;
       window.removeEventListener("crow:token-refresh-needed", handleRefresh);
     };
-  }, [getIdentityToken, isLoadingStyles]);
+  }, [effectiveGetIdentityToken, isLoadingStyles]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     if (context && Object.keys(context).length > 0) {
@@ -4116,7 +4187,7 @@ function CrowCopilot({
                   activeToolCalls: chat.activeToolCalls,
                   isLoadingHistory: conversations.isLoadingHistory,
                   isGenerating: chat.isLoading,
-                  toolRenderers
+                  toolRenderers: effectiveToolRenderers
                 }
               ),
               pendingConfirmation && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(