@apteva/apteva-kit 0.1.70 → 0.1.72

package/dist/index.js

@@ -1518,14 +1518,39 @@ function MarkdownContent({ content, className = "" }) {
 
 // src/components/Chat/ToolCall.tsx
 
-function ToolCall({ name, status }) {
+function ToolCall({ name, status, isReceiving = false, inputLength = 0 }) {
+  if (status === "preparing") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `apteva-tool-card apteva-tool-card-preparing ${isReceiving ? "apteva-tool-receiving" : ""}`, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-status-text", children: " preparing" }),
+        inputLength > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-char-count", children: [
+          " (",
+          inputLength,
+          " chars)"
+        ] })
+      ] })
+    ] });
+  }
   if (status === "running") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-card apteva-tool-card-running", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-label", children: name })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-status-text", children: " running" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-dots", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "." }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "." }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "." })
+        ] })
+      ] })
     ] });
   }
   if (status === "completed") {
@@ -1739,7 +1764,9 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
             ToolCall,
             {
               name: segment.name,
-              status: segment.result !== void 0 ? "completed" : "running"
+              status: segment.status || (segment.result !== void 0 ? "completed" : "running"),
+              isReceiving: segment.isReceiving,
+              inputLength: segment.inputLength
             }
           ) }, segment.id)
         );
@@ -2845,6 +2872,7 @@ ${widgetContext}` : widgetContext;
         let accumulatedWidgets = [];
         let responseThreadId = currentThreadId;
         let toolInputBuffer = "";
+        let receivingTimeout = null;
         const streamingMessageId = `msg-${Date.now()}`;
         const updateMessage = () => {
           const segments = [...contentSegments];
@@ -2921,7 +2949,7 @@ ${widgetContext}` : widgetContext;
                     contentSegments.push({ type: "text", content: currentTextBuffer });
                     currentTextBuffer = "";
                   }
-                  contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName });
+                  contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName, status: "preparing" });
                   toolInputBuffer = "";
                   setChatToolName(displayName);
                   _optionalChain([onToolCall, 'optionalCall', _72 => _72(chunk.tool_name, chunk.tool_id)]);
@@ -2931,6 +2959,29 @@ ${widgetContext}` : widgetContext;
               case "tool_input_delta":
                 if (chunk.tool_id && chunk.content) {
                   toolInputBuffer += chunk.content;
+                  const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
+                  if (toolSegment) {
+                    toolSegment.isReceiving = true;
+                    toolSegment.inputLength = toolInputBuffer.length;
+                    updateMessage();
+                    if (receivingTimeout) clearTimeout(receivingTimeout);
+                    receivingTimeout = setTimeout(() => {
+                      if (toolSegment.status === "preparing") {
+                        toolSegment.isReceiving = false;
+                        updateMessage();
+                      }
+                    }, 150);
+                  }
+                }
+                break;
+              case "tool_use":
+                if (chunk.tool_id) {
+                  const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
+                  if (toolSegment && toolSegment.status === "preparing") {
+                    toolSegment.status = "running";
+                    toolSegment.isReceiving = false;
+                    updateMessage();
+                  }
                 }
                 break;
               case "tool_result":
@@ -2938,6 +2989,8 @@ ${widgetContext}` : widgetContext;
                   const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
+                    toolSegment.status = "completed";
+                    toolSegment.isReceiving = false;
                     _optionalChain([onToolResult, 'optionalCall', _73 => _73(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);