@apteva/apteva-kit 0.1.69 → 0.1.71

package/dist/index.d.mts

@@ -23,6 +23,8 @@ interface Widget {
     actions?: Action[];
     /** Additional data not displayed but captured via onWidgetRender */
     meta?: Record<string, any>;
+    /** Whether the widget is still receiving streaming data */
+    isStreaming?: boolean;
 }
 interface CardWidget extends Widget {
     type: 'card';
@@ -392,7 +394,9 @@ interface CardProps {
 declare function Card({ widget, onAction }: CardProps): react_jsx_runtime.JSX.Element;
 
 interface ListProps {
-    widget: ListWidget;
+    widget: ListWidget & {
+        isStreaming?: boolean;
+    };
     onAction?: (action: ActionEvent) => void;
 }
 declare function List({ widget, onAction }: ListProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -23,6 +23,8 @@ interface Widget {
     actions?: Action[];
     /** Additional data not displayed but captured via onWidgetRender */
     meta?: Record<string, any>;
+    /** Whether the widget is still receiving streaming data */
+    isStreaming?: boolean;
 }
 interface CardWidget extends Widget {
     type: 'card';
@@ -392,7 +394,9 @@ interface CardProps {
 declare function Card({ widget, onAction }: CardProps): react_jsx_runtime.JSX.Element;
 
 interface ListProps {
-    widget: ListWidget;
+    widget: ListWidget & {
+        isStreaming?: boolean;
+    };
     onAction?: (action: ActionEvent) => void;
 }
 declare function List({ widget, onAction }: ListProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -502,6 +502,71 @@ function validateFile(file) {
 }
 
 // src/utils/widget-parser.ts
+var STREAMABLE_WIDGET_TYPES = ["list", "table"];
+function parsePartialItemsArray(partialJson) {
+  const items = [];
+  let isStreaming = false;
+  const itemsMatch = partialJson.match(/"items"\s*:\s*\[/);
+  if (!itemsMatch) {
+    return { items, isStreaming: false };
+  }
+  const arrayStart = partialJson.indexOf("[", itemsMatch.index);
+  if (arrayStart === -1) {
+    return { items, isStreaming: true };
+  }
+  let depth = 0;
+  let inString = false;
+  let escapeNext = false;
+  let objectStart = -1;
+  for (let i = arrayStart + 1; i < partialJson.length; i++) {
+    const char = partialJson[i];
+    if (escapeNext) {
+      escapeNext = false;
+      continue;
+    }
+    if (char === "\\" && inString) {
+      escapeNext = true;
+      continue;
+    }
+    if (char === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (char === "{") {
+      if (depth === 0) {
+        objectStart = i;
+      }
+      depth++;
+    } else if (char === "}") {
+      depth--;
+      if (depth === 0 && objectStart !== -1) {
+        const objectJson = partialJson.slice(objectStart, i + 1);
+        try {
+          const item = JSON.parse(objectJson);
+          if (!item.id) {
+            item.id = `item-${items.length}-${simpleHash(objectJson)}`;
+          }
+          items.push(item);
+        } catch (e) {
+        }
+        objectStart = -1;
+      }
+    } else if (char === "]" && depth === 0) {
+      isStreaming = false;
+      break;
+    }
+  }
+  if (depth > 0 || objectStart !== -1) {
+    isStreaming = true;
+  }
+  const afterItems = partialJson.slice(arrayStart);
+  const closingBracket = findMatchingBracket(afterItems, 0);
+  if (closingBracket === -1) {
+    isStreaming = true;
+  }
+  return { items, isStreaming };
+}
 function simpleHash(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -563,9 +628,38 @@ function parseWidgetsFromText(text) {
         const fullBracketStart = lastWidgetStart + bracketOpenIndex;
         const bracketEnd = findMatchingBracket(text, fullBracketStart);
         if (bracketEnd === -1) {
-          processText = text.slice(0, lastWidgetStart);
-          pendingWidgetType = widgetType;
-          hasPendingWidget = true;
+          if (STREAMABLE_WIDGET_TYPES.includes(widgetType)) {
+            const partialContent = text.slice(fullBracketStart + 1);
+            const { items, isStreaming } = parsePartialItemsArray(partialContent);
+            if (items.length > 0) {
+              processText = text.slice(0, lastWidgetStart);
+              const widgetId = `widget-${widgetType}-streaming-${simpleHash(partialContent)}`;
+              const textBefore = processText.replace(/[\s:;\-–—\.]+$/g, "").trim();
+              if (textBefore) {
+                segments.push({ type: "text", content: textBefore });
+              }
+              segments.push({
+                type: "widget",
+                widget: {
+                  type: widgetType,
+                  id: widgetId,
+                  props: widgetType === "table" ? { rows: items, columns: [] } : { items },
+                  isStreaming: true
+                }
+              });
+              hasWidgets = true;
+              hasPendingWidget = false;
+              processText = "";
+            } else {
+              processText = text.slice(0, lastWidgetStart);
+              pendingWidgetType = widgetType;
+              hasPendingWidget = true;
+            }
+          } else {
+            processText = text.slice(0, lastWidgetStart);
+            pendingWidgetType = widgetType;
+            hasPendingWidget = true;
+          }
         }
       }
     }
@@ -729,38 +823,73 @@ function Card({ widget, onAction }) {
 
 // src/components/Widgets/widget-library/List.tsx
 
+
 function List({ widget, onAction }) {
   const { items } = widget.props;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      className: `flex items-center p-4 transition-colors ${index !== items.length - 1 ? "border-b border-neutral-200 dark:border-neutral-700" : ""} ${!item.backgroundColor ? "hover:bg-neutral-50 dark:hover:bg-neutral-800" : ""}`,
-      style: item.backgroundColor ? { backgroundColor: item.backgroundColor } : void 0,
-      children: [
-        item.image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold !text-neutral-900 dark:!text-white", children: item.title }),
-          item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-sm !text-neutral-600 dark:!text-neutral-400", children: item.subtitle }),
-          item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1", children: item.description })
-        ] }),
-        widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "button",
-          {
-            onClick: () => _optionalChain([onAction, 'optionalCall', _3 => _3({
-              type: action.type,
-              payload: item.metadata || item,
-              widgetId: widget.id,
-              timestamp: /* @__PURE__ */ new Date()
-            })]),
-            className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
-            children: action.label
-          },
-          idx
-        )) })
-      ]
-    },
-    item.id
-  )) });
+  const isStreaming = _nullishCoalesce(widget.isStreaming, () => ( false));
+  const seenItemsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
+  const [newItemIds, setNewItemIds] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
+  _react.useEffect.call(void 0, () => {
+    const currentIds = new Set(items.map((item) => item.id));
+    const newIds = /* @__PURE__ */ new Set();
+    items.forEach((item) => {
+      if (!seenItemsRef.current.has(item.id)) {
+        newIds.add(item.id);
+      }
+    });
+    items.forEach((item) => seenItemsRef.current.add(item.id));
+    if (newIds.size > 0) {
+      setNewItemIds(newIds);
+      const timer = setTimeout(() => {
+        setNewItemIds(/* @__PURE__ */ new Set());
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [items]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
+    items.map((item, index) => {
+      const isNew = newItemIds.has(item.id);
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: `apteva-list-item flex items-center p-4 transition-colors ${!isLast || isStreaming ? "border-b border-neutral-200 dark:border-neutral-700" : ""} ${!item.backgroundColor ? "hover:bg-neutral-50 dark:hover:bg-neutral-800" : ""} ${isNew ? "apteva-list-item-new" : ""}`,
+          style: item.backgroundColor ? { backgroundColor: item.backgroundColor } : void 0,
+          children: [
+            item.image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold !text-neutral-900 dark:!text-white", children: item.title }),
+              item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-sm !text-neutral-600 dark:!text-neutral-400", children: item.subtitle }),
+              item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1", children: item.description })
+            ] }),
+            widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: () => _optionalChain([onAction, 'optionalCall', _3 => _3({
+                  type: action.type,
+                  payload: item.metadata || item,
+                  widgetId: widget.id,
+                  timestamp: /* @__PURE__ */ new Date()
+                })]),
+                className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
+                children: action.label
+              },
+              idx
+            )) })
+          ]
+        },
+        item.id
+      );
+    }),
+    isStreaming && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-list-streaming flex items-center gap-3 p-4 text-neutral-500 dark:text-neutral-400", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-streaming-dots flex gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "150ms" } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "300ms" } })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm", children: "Loading more..." })
+    ] })
+  ] });
 }
 
 // src/components/Widgets/widget-library/Button.tsx
@@ -840,8 +969,32 @@ function ButtonGroup({ widget, onAction }) {
 
 // src/components/Widgets/widget-library/Table.tsx
 
+
 function Table({ widget, onAction }) {
   const { columns, rows, caption, compact = false, striped = false } = widget.props;
+  const isStreaming = _nullishCoalesce(widget.isStreaming, () => ( false));
+  const seenRowsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
+  const [newRowIds, setNewRowIds] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
+  _react.useEffect.call(void 0, () => {
+    const newIds = /* @__PURE__ */ new Set();
+    rows.forEach((row, index) => {
+      const rowId = row.id || `row-${index}`;
+      if (!seenRowsRef.current.has(rowId)) {
+        newIds.add(rowId);
+      }
+    });
+    rows.forEach((row, index) => {
+      const rowId = row.id || `row-${index}`;
+      seenRowsRef.current.add(rowId);
+    });
+    if (newIds.size > 0) {
+      setNewRowIds(newIds);
+      const timer = setTimeout(() => {
+        setNewRowIds(/* @__PURE__ */ new Set());
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [rows]);
   const getAlignment = (align) => {
     switch (align) {
       case "center":
@@ -868,47 +1021,67 @@ function Table({ widget, onAction }) {
       column.key
     )) }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tbody", { children: [
-      rows.map((row, rowIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "tr",
-        {
-          className: cn(
-            "border-b border-neutral-200 dark:border-neutral-700 last:border-b-0",
-            "transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800",
-            striped && rowIndex % 2 === 1 && "bg-neutral-50/50 dark:bg-neutral-800/50"
-          ),
-          onClick: () => {
-            if (widget.actions && widget.actions.length > 0) {
-              _optionalChain([onAction, 'optionalCall', _15 => _15({
-                type: widget.actions[0].type,
-                payload: row,
-                widgetId: widget.id,
-                timestamp: /* @__PURE__ */ new Date()
-              })]);
-            }
-          },
-          style: { cursor: _optionalChain([widget, 'access', _16 => _16.actions, 'optionalAccess', _17 => _17.length]) ? "pointer" : "default" },
-          children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "td",
-            {
-              className: cn(
-                "text-neutral-700 dark:text-neutral-300",
-                compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
-                getAlignment(column.align)
-              ),
-              children: _nullishCoalesce(row[column.key], () => ( "\u2014"))
+      rows.map((row, rowIndex) => {
+        const rowId = row.id || `row-${rowIndex}`;
+        const isNew = newRowIds.has(rowId);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "tr",
+          {
+            className: cn(
+              "apteva-table-row border-b border-neutral-200 dark:border-neutral-700 last:border-b-0",
+              "transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800",
+              striped && rowIndex % 2 === 1 && "bg-neutral-50/50 dark:bg-neutral-800/50",
+              isNew && "apteva-table-row-new"
+            ),
+            onClick: () => {
+              if (widget.actions && widget.actions.length > 0) {
+                _optionalChain([onAction, 'optionalCall', _15 => _15({
+                  type: widget.actions[0].type,
+                  payload: row,
+                  widgetId: widget.id,
+                  timestamp: /* @__PURE__ */ new Date()
+                })]);
+              }
             },
-            column.key
-          ))
-        },
-        row.id || rowIndex
-      )),
-      rows.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            style: { cursor: _optionalChain([widget, 'access', _16 => _16.actions, 'optionalAccess', _17 => _17.length]) ? "pointer" : "default" },
+            children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "td",
+              {
+                className: cn(
+                  "text-neutral-700 dark:text-neutral-300",
+                  compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
+                  getAlignment(column.align)
+                ),
+                children: _nullishCoalesce(row[column.key], () => ( "\u2014"))
+              },
+              column.key
+            ))
+          },
+          rowId
+        );
+      }),
+      rows.length === 0 && !isStreaming && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "td",
         {
-          colSpan: columns.length,
+          colSpan: columns.length || 1,
           className: "px-4 py-8 text-center text-sm text-neutral-500 dark:text-neutral-400",
           children: "No data available"
         }
+      ) }),
+      isStreaming && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { className: "apteva-table-streaming", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "td",
+        {
+          colSpan: columns.length || 1,
+          className: "px-4 py-3 text-center",
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-center gap-3 text-neutral-500 dark:text-neutral-400", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "0ms" } }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "150ms" } }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "300ms" } })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm", children: "Loading more..." })
+          ] })
+        }
       ) })
     ] })
   ] }) }) });
@@ -1345,14 +1518,39 @@ function MarkdownContent({ content, className = "" }) {
 
 // src/components/Chat/ToolCall.tsx
 
-function ToolCall({ name, status }) {
+function ToolCall({ name, status, isReceiving = false }) {
+  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" }),
+        /* @__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 === "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") {
@@ -1566,7 +1764,8 @@ 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
             }
           ) }, segment.id)
         );
@@ -2672,6 +2871,7 @@ ${widgetContext}` : widgetContext;
         let accumulatedWidgets = [];
         let responseThreadId = currentThreadId;
         let toolInputBuffer = "";
+        let receivingTimeout = null;
         const streamingMessageId = `msg-${Date.now()}`;
         const updateMessage = () => {
           const segments = [...contentSegments];
@@ -2748,7 +2948,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)]);
@@ -2758,6 +2958,28 @@ ${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;
+                    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":
@@ -2765,6 +2987,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);