@usecrow/ui 0.1.26 → 0.1.27

package/dist/index.cjs

@@ -96,6 +96,7 @@ function useChat({
   const [selectedModel, setSelectedModel] = React3.useState(initialSelectedModel || DEFAULT_MODEL);
   const abortControllerRef = React3.useRef(null);
   const hasCheckedPersistRef = React3.useRef(false);
+  const streamingToolCallsRef = React3.useRef([]);
   React3.useEffect(() => {
     if (initialSelectedModel) {
       setSelectedModel((prev) => prev !== initialSelectedModel ? initialSelectedModel : prev);
@@ -177,6 +178,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",
@@ -259,16 +276,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?.({
@@ -276,11 +292,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)) {
@@ -297,6 +327,20 @@ function useChat({
                       }
                       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,
@@ -363,6 +407,7 @@ function useChat({
         return { userMsgId: "", botMsgId: "" };
       }
       setActiveToolCalls([]);
+      streamingToolCallsRef.current = [];
       const userMsgId = generateMessageId("user");
       const botMsgId = generateMessageId("bot");
       setMessages((prev) => [
@@ -597,7 +642,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) {
@@ -625,7 +679,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) {
@@ -1946,15 +2009,19 @@ function MessageList({
     (lastIdx, m, i) => m.isBot ? i : lastIdx,
     -1
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: messages.map((msg, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    MessageBubble,
-    {
-      message: msg,
-      toolCalls: index === lastBotIndex ? activeToolCalls : void 0,
-      isLoading: index === lastBotIndex && isGenerating
-    },
-    msg.id
-  )) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: messages.map((msg, index) => {
+    const isLastBot = index === lastBotIndex;
+    const toolCallsToShow = isLastBot && isGenerating ? activeToolCalls : msg.toolCalls || [];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MessageBubble,
+      {
+        message: msg,
+        toolCalls: toolCallsToShow,
+        isLoading: isLastBot && isGenerating
+      },
+      msg.id
+    );
+  }) });
 }
 var MessagesContainer = React3.forwardRef(({ children }, ref) => {
   const styles = useWidgetStyles2();