@usecrow/ui 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -126,6 +126,7 @@ function useChat({
     async (message, botMsgId) => {
       let accumulatedText = "";
       let firstChunk = true;
+      const pendingClientTools = [];
       abortControllerRef.current = new AbortController();
       try {
         const identityToken = window.__crow_identity_token;
@@ -157,6 +158,14 @@ function useChat({
                 const data = line.slice(6).trim();
                 if (data === "[DONE]") {
                   setIsLoading(false);
+                  for (const tool of pendingClientTools) {
+                    onToolCall?.({
+                      type: "client_call",
+                      toolName: tool.toolName,
+                      toolCallId: tool.toolCallId,
+                      arguments: tool.arguments
+                    });
+                  }
                   return;
                 }
                 try {
@@ -253,9 +262,9 @@ function useChat({
                       );
                       break;
                     case "client_tool_call":
-                      onToolCall?.({
-                        type: "client_call",
+                      pendingClientTools.push({
                         toolName: parsed.tool_name,
+                        toolCallId: parsed.tool_call_id,
                         arguments: parsed.arguments
                       });
                       break;
@@ -369,6 +378,102 @@ function useChat({
   const loadMessages = React3.useCallback((historyMessages) => {
     setMessages(historyMessages);
   }, []);
+  const submitToolResult = React3.useCallback(
+    async (toolCallId, toolName, result) => {
+      if (!conversationId) {
+        console.error("[Crow] Cannot submit tool result: no conversation ID");
+        return;
+      }
+      const botMsgId = generateMessageId("bot");
+      const pendingClientTools = [];
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: botMsgId,
+          content: "",
+          isBot: true,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+      setIsLoading(true);
+      try {
+        const identityToken = window.__crow_identity_token;
+        const response = await fetch(`${apiUrl}/api/chat/tool-result`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            product_id: productId,
+            conversation_id: conversationId,
+            tool_call_id: toolCallId,
+            tool_name: toolName,
+            result,
+            identity_token: identityToken,
+            model: selectedModel
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+        let accumulatedText = "";
+        if (reader) {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            const lines = chunk.split("\n");
+            for (const line of lines) {
+              if (line.startsWith("data: ")) {
+                const data = line.slice(6).trim();
+                if (data === "[DONE]") {
+                  setIsLoading(false);
+                  for (const tool of pendingClientTools) {
+                    onToolCall?.({
+                      type: "client_call",
+                      toolName: tool.toolName,
+                      toolCallId: tool.toolCallId,
+                      arguments: tool.arguments
+                    });
+                  }
+                  return;
+                }
+                try {
+                  const parsed = JSON.parse(data);
+                  if (parsed.type === "content") {
+                    accumulatedText += parsed.content;
+                    setMessages(
+                      (prev) => prev.map(
+                        (msg) => msg.id === botMsgId ? { ...msg, content: accumulatedText } : msg
+                      )
+                    );
+                  } else if (parsed.type === "client_tool_call") {
+                    pendingClientTools.push({
+                      toolName: parsed.tool_name,
+                      toolCallId: parsed.tool_call_id,
+                      arguments: parsed.arguments
+                    });
+                  }
+                } catch (e) {
+                  console.error("[Crow] Parse error in tool result response:", e);
+                }
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.error("[Crow] Error submitting tool result:", error);
+        setMessages(
+          (prev) => prev.map(
+            (msg) => msg.id === botMsgId ? { ...msg, content: "Sorry, I encountered an error processing the tool result." } : msg
+          )
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [apiUrl, productId, conversationId, selectedModel]
+  );
   return {
     messages,
     isLoading,
@@ -380,7 +485,8 @@ function useChat({
     sendMessage,
     stopGeneration,
     resetMessages,
-    loadMessages
+    loadMessages,
+    submitToolResult
   };
 }
 function useConversations({ productId, apiUrl = "" }) {
@@ -668,8 +774,8 @@ var DEFAULT_WIDGET_STYLES = {
     border: "#d1d5db",
     text: "#111827",
     // Bot messages
-    botBubble: "#ffffff",
-    botText: "#000000",
+    botBubble: "#000000",
+    botText: "#ffffff",
     // User messages
     userBubble: "#ffffff",
     userText: "#000000",
@@ -2114,6 +2220,7 @@ function CrowWidget({
   });
   const messagesContainerRef = React3.useRef(null);
   const executeClientToolRef = React3.useRef(null);
+  const submitToolResultRef = React3.useRef(null);
   const [isCollapsed, setIsCollapsed] = React3.useState(variant === "floating");
   const [showConversationList, setShowConversationList] = React3.useState(false);
   const [isVerifiedUser, setIsVerifiedUser] = React3.useState(false);
@@ -2160,11 +2267,30 @@ function CrowWidget({
           break;
       }
     },
-    onToolCall: (event) => {
-      if (event.type === "client_call" && event.toolName) {
-        console.log("[Crow Widget] Executing client tool:", event.toolName, event.arguments);
-        const result = executeClientToolRef.current?.(event.toolName, event.arguments || {});
-        result?.then((r) => console.log("[Crow Widget] Tool result:", r)).catch((e) => console.error("[Crow Widget] Tool error:", e));
+    onToolCall: async (event) => {
+      if (event.type === "client_call" && event.toolName && event.toolCallId) {
+        try {
+          const result = await executeClientToolRef.current?.(
+            event.toolName,
+            event.arguments || {}
+          );
+          if (result && submitToolResultRef.current) {
+            await submitToolResultRef.current(
+              event.toolCallId,
+              event.toolName,
+              result
+            );
+          }
+        } catch (e) {
+          console.error("[Crow Widget] Tool error:", e);
+          if (submitToolResultRef.current) {
+            await submitToolResultRef.current(
+              event.toolCallId,
+              event.toolName,
+              { success: false, error: String(e) }
+            );
+          }
+        }
       }
     },
     onRestoredConversation: () => {
@@ -2210,6 +2336,7 @@ function CrowWidget({
     }
   });
   executeClientToolRef.current = executeClientTool;
+  submitToolResultRef.current = chat.submitToolResult;
   React3.useEffect(() => {
     if (!isLoadingStyles) {
       onReady?.();