@usecrow/ui 0.1.25 → 0.1.27

package/dist/index.d.cts

@@ -230,8 +230,10 @@ interface CrowWidgetProps {
     onIdentify?: (identify: IdentifyFunction) => void;
     /** Client-side tools the agent can call */
     tools?: ToolsMap;
+    /** Callback fired when a server-side tool completes, with the tool name and full result data */
+    onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
 }
-declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, onToolResult, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -264,8 +266,10 @@ interface CrowCopilotProps {
     className?: string;
     /** Callback when copilot is ready */
     onReady?: () => 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;
 }
-declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, onToolResult, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -448,6 +452,7 @@ interface Message {
     citations?: Citation[];
     thinking?: string;
     thinkingComplete?: boolean;
+    toolCalls?: ToolCall[];
     links?: ToolResultLink[];
 }
 interface Citation {
@@ -555,9 +560,10 @@ interface UseChatOptions {
     onConversationId?: (id: string) => void;
     onWorkflowEvent?: (event: WorkflowEvent) => void;
     onToolCall?: (toolCall: ToolCallEvent) => void;
+    onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
     onRestoredConversation?: (conversationId: string) => void;
 }
-declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onRestoredConversation, }: UseChatOptions): {
+declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult, onRestoredConversation, }: UseChatOptions): {
     messages: Message[];
     isLoading: boolean;
     activeToolCalls: ToolCall[];

package/dist/index.d.ts

@@ -230,8 +230,10 @@ interface CrowWidgetProps {
     onIdentify?: (identify: IdentifyFunction) => void;
     /** Client-side tools the agent can call */
     tools?: ToolsMap;
+    /** Callback fired when a server-side tool completes, with the tool name and full result data */
+    onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
 }
-declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, onToolResult, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -264,8 +266,10 @@ interface CrowCopilotProps {
     className?: string;
     /** Callback when copilot is ready */
     onReady?: () => 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;
 }
-declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, onToolResult, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -448,6 +452,7 @@ interface Message {
     citations?: Citation[];
     thinking?: string;
     thinkingComplete?: boolean;
+    toolCalls?: ToolCall[];
     links?: ToolResultLink[];
 }
 interface Citation {
@@ -555,9 +560,10 @@ interface UseChatOptions {
     onConversationId?: (id: string) => void;
     onWorkflowEvent?: (event: WorkflowEvent) => void;
     onToolCall?: (toolCall: ToolCallEvent) => void;
+    onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
     onRestoredConversation?: (conversationId: string) => void;
 }
-declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onRestoredConversation, }: UseChatOptions): {
+declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult, onRestoredConversation, }: UseChatOptions): {
     messages: Message[];
     isLoading: boolean;
     activeToolCalls: ToolCall[];

package/dist/index.js

@@ -52,6 +52,7 @@ function useChat({
   onConversationId,
   onWorkflowEvent,
   onToolCall,
+  onToolResult,
   onRestoredConversation
 }) {
   const effectiveWelcomeMessage = welcomeMessage || DEFAULT_WELCOME_MESSAGE;
@@ -69,6 +70,7 @@ function useChat({
   const [selectedModel, setSelectedModel] = useState(initialSelectedModel || DEFAULT_MODEL);
   const abortControllerRef = useRef(null);
   const hasCheckedPersistRef = useRef(false);
+  const streamingToolCallsRef = useRef([]);
   useEffect(() => {
     if (initialSelectedModel) {
       setSelectedModel((prev) => prev !== initialSelectedModel ? initialSelectedModel : prev);
@@ -150,6 +152,22 @@ function useChat({
                 const data = line.slice(6).trim();
                 if (data === "[DONE]") {
                   setIsLoading(false);
+                  const finalToolCalls = [...streamingToolCallsRef.current];
+                  if (finalToolCalls.length > 0) {
+                    setMessages(
+                      (prev) => prev.map(
+                        (msg) => msg.id === botMsgId ? { ...msg, toolCalls: finalToolCalls, thinkingComplete: true } : msg
+                      )
+                    );
+                  } else {
+                    setMessages(
+                      (prev) => prev.map(
+                        (msg) => msg.id === botMsgId ? { ...msg, thinkingComplete: true } : msg
+                      )
+                    );
+                  }
+                  setActiveToolCalls([]);
+                  streamingToolCallsRef.current = [];
                   for (const tool of pendingClientTools) {
                     onToolCall?.({
                       type: "client_call",
@@ -232,16 +250,15 @@ function useChat({
                         toolName: parsed.tool_name,
                         arguments: parsed.arguments
                       });
-                      setActiveToolCalls((prev) => [
-                        ...prev,
-                        {
-                          id: `tool-${Date.now()}`,
-                          name: parsed.tool_name,
-                          arguments: parsed.arguments || {},
-                          status: "executing",
-                          timestamp: /* @__PURE__ */ new Date()
-                        }
-                      ]);
+                      const newToolCall = {
+                        id: `tool-${Date.now()}`,
+                        name: parsed.tool_name,
+                        arguments: parsed.arguments || {},
+                        status: "executing",
+                        timestamp: /* @__PURE__ */ new Date()
+                      };
+                      streamingToolCallsRef.current = [...streamingToolCallsRef.current, newToolCall];
+                      setActiveToolCalls((prev) => [...prev, newToolCall]);
                       break;
                     case "tool_call_complete":
                       onToolCall?.({
@@ -249,11 +266,25 @@ function useChat({
                         toolName: parsed.tool_name,
                         success: parsed.success
                       });
-                      setActiveToolCalls(
-                        (prev) => prev.map(
-                          (tool) => tool.name === parsed.tool_name ? { ...tool, status: parsed.success ? "complete" : "error" } : tool
-                        )
-                      );
+                      const newStatus = parsed.success ? "complete" : "error";
+                      let updated = false;
+                      streamingToolCallsRef.current = streamingToolCallsRef.current.map((tool) => {
+                        if (!updated && tool.name === parsed.tool_name && tool.status === "executing") {
+                          updated = true;
+                          return { ...tool, status: newStatus };
+                        }
+                        return tool;
+                      });
+                      setActiveToolCalls((prev) => {
+                        let updated2 = false;
+                        return prev.map((tool) => {
+                          if (!updated2 && tool.name === parsed.tool_name && tool.status === "executing") {
+                            updated2 = true;
+                            return { ...tool, status: newStatus };
+                          }
+                          return tool;
+                        });
+                      });
                       break;
                     case "tool_result_links":
                       if (parsed.links && Array.isArray(parsed.links)) {
@@ -264,7 +295,26 @@ function useChat({
                         );
                       }
                       break;
+                    case "tool_result":
+                      if (parsed.tool_name && parsed.result) {
+                        onToolResult?.(parsed.tool_name, parsed.result);
+                      }
+                      break;
                     case "client_tool_call":
+                      onToolCall?.({
+                        type: "start",
+                        toolName: parsed.tool_name,
+                        arguments: parsed.arguments
+                      });
+                      const clientToolCall = {
+                        id: `tool-${Date.now()}`,
+                        name: parsed.tool_name,
+                        arguments: parsed.arguments || {},
+                        status: "executing",
+                        timestamp: /* @__PURE__ */ new Date()
+                      };
+                      streamingToolCallsRef.current = [...streamingToolCallsRef.current, clientToolCall];
+                      setActiveToolCalls((prev) => [...prev, clientToolCall]);
                       pendingClientTools.push({
                         toolName: parsed.tool_name,
                         toolCallId: parsed.tool_call_id,
@@ -323,7 +373,7 @@ function useChat({
         abortControllerRef.current = null;
       }
     },
-    [apiUrl, productId, conversationId, selectedModel, persistAnonymousConversations, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall]
+    [apiUrl, productId, conversationId, selectedModel, persistAnonymousConversations, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult]
   );
   const sendMessage = useCallback(
     (content) => {
@@ -331,6 +381,7 @@ function useChat({
         return { userMsgId: "", botMsgId: "" };
       }
       setActiveToolCalls([]);
+      streamingToolCallsRef.current = [];
       const userMsgId = generateMessageId("user");
       const botMsgId = generateMessageId("bot");
       setMessages((prev) => [
@@ -565,7 +616,16 @@ function useConversations({ productId, apiUrl = "" }) {
             id: `history-${idx}`,
             content: msg.content,
             isBot: msg.role === "assistant",
-            timestamp: /* @__PURE__ */ new Date()
+            timestamp: /* @__PURE__ */ new Date(),
+            thinking: msg.thinking,
+            thinkingComplete: true,
+            toolCalls: msg.tool_calls?.map((tc, i) => ({
+              id: `history-tool-${idx}-${i}`,
+              name: tc.name,
+              arguments: tc.arguments || {},
+              status: tc.status,
+              timestamp: /* @__PURE__ */ new Date()
+            }))
           }));
         }
       } catch (error) {
@@ -593,7 +653,16 @@ function useConversations({ productId, apiUrl = "" }) {
             id: `history-${idx}`,
             content: msg.content,
             isBot: msg.role === "assistant",
-            timestamp: /* @__PURE__ */ new Date()
+            timestamp: /* @__PURE__ */ new Date(),
+            thinking: msg.thinking,
+            thinkingComplete: true,
+            toolCalls: msg.tool_calls?.map((tc, i) => ({
+              id: `history-tool-${idx}-${i}`,
+              name: tc.name,
+              arguments: tc.arguments || {},
+              status: tc.status,
+              timestamp: /* @__PURE__ */ new Date()
+            }))
           }));
         }
       } catch (error) {
@@ -1914,15 +1983,19 @@ function MessageList({
     (lastIdx, m, i) => m.isBot ? i : lastIdx,
     -1
   );
-  return /* @__PURE__ */ jsx(Fragment, { children: messages.map((msg, index) => /* @__PURE__ */ jsx(
-    MessageBubble,
-    {
-      message: msg,
-      toolCalls: index === lastBotIndex ? activeToolCalls : void 0,
-      isLoading: index === lastBotIndex && isGenerating
-    },
-    msg.id
-  )) });
+  return /* @__PURE__ */ jsx(Fragment, { children: messages.map((msg, index) => {
+    const isLastBot = index === lastBotIndex;
+    const toolCallsToShow = isLastBot && isGenerating ? activeToolCalls : msg.toolCalls || [];
+    return /* @__PURE__ */ jsx(
+      MessageBubble,
+      {
+        message: msg,
+        toolCalls: toolCallsToShow,
+        isLoading: isLastBot && isGenerating
+      },
+      msg.id
+    );
+  }) });
 }
 var MessagesContainer = forwardRef(({ children }, ref) => {
   const styles = useWidgetStyles2();
@@ -2747,7 +2820,8 @@ function CrowWidget({
   welcomeMessage: welcomeMessageProp,
   onReady,
   onIdentify,
-  tools
+  tools,
+  onToolResult
 }) {
   const {
     styles,
@@ -2825,6 +2899,7 @@ function CrowWidget({
           break;
       }
     },
+    onToolResult,
     onToolCall: async (event) => {
       if (event.type === "client_call" && event.toolName && event.toolCallId) {
         try {
@@ -3264,7 +3339,8 @@ function CrowCopilot({
   styles: propStyles,
   previewMode = false,
   className,
-  onReady
+  onReady,
+  onToolResult
 }) {
   const {
     styles,
@@ -3305,6 +3381,7 @@ function CrowCopilot({
     },
     onConversationId: () => {
     },
+    onToolResult,
     onToolCall: (event) => {
       if (event.type === "client_call" && event.toolName) {
         console.log(