@apteva/apteva-kit 0.1.69 → 0.1.71

package/dist/index.mjs

@@ -4,13 +4,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef5, useMemo as useMemo2, forwardRef, useImperativeHandle } from "react";
+import { useState as useState6, useEffect as useEffect6, useRef as useRef7, useMemo as useMemo2, forwardRef, useImperativeHandle } from "react";
 
 // src/components/Chat/MessageList.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
 
 // src/components/Chat/Message.tsx
-import { useEffect as useEffect2, useRef, useMemo } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useMemo } from "react";
 
 // src/utils/cn.ts
 import { clsx } from "clsx";
@@ -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;
+          }
         }
       }
     }
@@ -695,7 +789,7 @@ Widgets: @ui:type[{props}]. Types: ${widgets.join(", ")}. Add "meta" at root (no
 }
 
 // src/components/Widgets/Widgets.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect3 } from "react";
 
 // src/components/Widgets/widget-library/Card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -728,39 +822,74 @@ function Card({ widget, onAction }) {
 }
 
 // src/components/Widgets/widget-library/List.tsx
+import { useEffect, useRef, useState } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function List({ widget, onAction }) {
   const { items } = widget.props;
-  return /* @__PURE__ */ jsx2("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__ */ jsxs2(
-    "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__ */ jsx2("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
-        /* @__PURE__ */ jsxs2("div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
-          /* @__PURE__ */ jsx2("h4", { className: "font-semibold !text-neutral-900 dark:!text-white", children: item.title }),
-          item.subtitle && /* @__PURE__ */ jsx2("p", { className: "!text-sm !text-neutral-600 dark:!text-neutral-400", children: item.subtitle }),
-          item.description && /* @__PURE__ */ jsx2("p", { className: "!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1", children: item.description })
-        ] }),
-        widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx2(
-          "button",
-          {
-            onClick: () => onAction?.({
-              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 = widget.isStreaming ?? false;
+  const seenItemsRef = useRef(/* @__PURE__ */ new Set());
+  const [newItemIds, setNewItemIds] = useState(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    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__ */ jsxs2("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__ */ jsxs2(
+        "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__ */ jsx2("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
+            /* @__PURE__ */ jsxs2("div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
+              /* @__PURE__ */ jsx2("h4", { className: "font-semibold !text-neutral-900 dark:!text-white", children: item.title }),
+              item.subtitle && /* @__PURE__ */ jsx2("p", { className: "!text-sm !text-neutral-600 dark:!text-neutral-400", children: item.subtitle }),
+              item.description && /* @__PURE__ */ jsx2("p", { className: "!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1", children: item.description })
+            ] }),
+            widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => onAction?.({
+                  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__ */ jsxs2("div", { className: "apteva-list-streaming flex items-center gap-3 p-4 text-neutral-500 dark:text-neutral-400", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "apteva-streaming-dots flex gap-1", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "150ms" } }),
+        /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "300ms" } })
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "text-sm", children: "Loading more..." })
+    ] })
+  ] });
 }
 
 // src/components/Widgets/widget-library/Button.tsx
@@ -839,9 +968,33 @@ function ButtonGroup({ widget, onAction }) {
 }
 
 // src/components/Widgets/widget-library/Table.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Table({ widget, onAction }) {
   const { columns, rows, caption, compact = false, striped = false } = widget.props;
+  const isStreaming = widget.isStreaming ?? false;
+  const seenRowsRef = useRef2(/* @__PURE__ */ new Set());
+  const [newRowIds, setNewRowIds] = useState2(/* @__PURE__ */ new Set());
+  useEffect2(() => {
+    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,58 +1021,78 @@ function Table({ widget, onAction }) {
       column.key
     )) }) }),
     /* @__PURE__ */ jsxs3("tbody", { children: [
-      rows.map((row, rowIndex) => /* @__PURE__ */ jsx5(
-        "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) {
-              onAction?.({
-                type: widget.actions[0].type,
-                payload: row,
-                widgetId: widget.id,
-                timestamp: /* @__PURE__ */ new Date()
-              });
-            }
-          },
-          style: { cursor: widget.actions?.length ? "pointer" : "default" },
-          children: columns.map((column) => /* @__PURE__ */ jsx5(
-            "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: row[column.key] ?? "\u2014"
+      rows.map((row, rowIndex) => {
+        const rowId = row.id || `row-${rowIndex}`;
+        const isNew = newRowIds.has(rowId);
+        return /* @__PURE__ */ jsx5(
+          "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) {
+                onAction?.({
+                  type: widget.actions[0].type,
+                  payload: row,
+                  widgetId: widget.id,
+                  timestamp: /* @__PURE__ */ new Date()
+                });
+              }
             },
-            column.key
-          ))
-        },
-        row.id || rowIndex
-      )),
-      rows.length === 0 && /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
+            style: { cursor: widget.actions?.length ? "pointer" : "default" },
+            children: columns.map((column) => /* @__PURE__ */ jsx5(
+              "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: row[column.key] ?? "\u2014"
+              },
+              column.key
+            ))
+          },
+          rowId
+        );
+      }),
+      rows.length === 0 && !isStreaming && /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
         "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__ */ jsx5("tr", { className: "apteva-table-streaming", children: /* @__PURE__ */ jsx5(
+        "td",
+        {
+          colSpan: columns.length || 1,
+          className: "px-4 py-3 text-center",
+          children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center gap-3 text-neutral-500 dark:text-neutral-400", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "0ms" } }),
+              /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "150ms" } }),
+              /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 bg-current rounded-full animate-pulse", style: { animationDelay: "300ms" } })
+            ] }),
+            /* @__PURE__ */ jsx5("span", { className: "text-sm", children: "Loading more..." })
+          ] })
+        }
       ) })
     ] })
   ] }) }) });
 }
 
 // src/components/Widgets/widget-library/Form.tsx
-import { useState } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Form({ widget, onAction }) {
   const { title, fields } = widget.props;
-  const [formData, setFormData] = useState(() => {
+  const [formData, setFormData] = useState3(() => {
     const initial = {};
     fields.forEach((field) => {
       initial[field.name] = field.defaultValue ?? (field.type === "checkbox" ? false : "");
@@ -1069,7 +1242,7 @@ function Widgets({
   columns = 3,
   className
 }) {
-  useEffect(() => {
+  useEffect3(() => {
     widgets.forEach((widget) => {
       onWidgetMount?.(widget.id);
     });
@@ -1345,14 +1518,39 @@ function MarkdownContent({ content, className = "" }) {
 
 // src/components/Chat/ToolCall.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function ToolCall({ name, status }) {
+function ToolCall({ name, status, isReceiving = false }) {
+  if (status === "preparing") {
+    return /* @__PURE__ */ jsxs8("div", { className: `apteva-tool-card apteva-tool-card-preparing ${isReceiving ? "apteva-tool-receiving" : ""}`, children: [
+      /* @__PURE__ */ jsxs8("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx11("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx11("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      ] }),
+      /* @__PURE__ */ jsxs8("span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ jsx11("strong", { children: name }),
+        /* @__PURE__ */ jsx11("span", { className: "apteva-tool-status-text", children: " preparing" }),
+        /* @__PURE__ */ jsxs8("span", { className: "apteva-tool-dots", children: [
+          /* @__PURE__ */ jsx11("span", { children: "." }),
+          /* @__PURE__ */ jsx11("span", { children: "." }),
+          /* @__PURE__ */ jsx11("span", { children: "." })
+        ] })
+      ] })
+    ] });
+  }
   if (status === "running") {
     return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
       /* @__PURE__ */ jsxs8("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
         /* @__PURE__ */ jsx11("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
         /* @__PURE__ */ jsx11("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ jsx11("span", { className: "apteva-tool-label", children: name })
+      /* @__PURE__ */ jsxs8("span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ jsx11("strong", { children: name }),
+        /* @__PURE__ */ jsx11("span", { className: "apteva-tool-status-text", children: " running" }),
+        /* @__PURE__ */ jsxs8("span", { className: "apteva-tool-dots", children: [
+          /* @__PURE__ */ jsx11("span", { children: "." }),
+          /* @__PURE__ */ jsx11("span", { children: "." }),
+          /* @__PURE__ */ jsx11("span", { children: "." })
+        ] })
+      ] })
     ] });
   }
   if (status === "completed") {
@@ -1377,7 +1575,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const contentSegments = message.metadata?.content_segments;
   const isStreaming = message.metadata?.isStreaming === true;
   const hasContent = message.content || contentSegments && contentSegments.length > 0;
-  const reportedWidgetsRef = useRef(/* @__PURE__ */ new Set());
+  const reportedWidgetsRef = useRef3(/* @__PURE__ */ new Set());
   const parsedWidgets = useMemo(() => {
     if (!enableWidgets || isUser || !message.content) {
       return [];
@@ -1385,7 +1583,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     const parsed = parseWidgetsFromText(message.content);
     return parsed.segments.filter((seg) => seg.type === "widget" && !!seg.widget).map((seg) => seg.widget);
   }, [enableWidgets, isUser, message.content]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (onWidgetRender && message.widgets) {
       for (const widget of message.widgets) {
         if (!reportedWidgetsRef.current.has(widget.id)) {
@@ -1395,7 +1593,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       }
     }
   }, [message.widgets, onWidgetRender]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (onWidgetRender && parsedWidgets.length > 0) {
       for (const widget of parsedWidgets) {
         if (!reportedWidgetsRef.current.has(widget.id)) {
@@ -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)
         );
@@ -1767,16 +1966,16 @@ function MessageList({
   enableWidgets,
   onWidgetRender
 }) {
-  const listRef = useRef2(null);
-  const isNearBottomRef = useRef2(true);
-  const lastScrollHeightRef = useRef2(0);
+  const listRef = useRef4(null);
+  const isNearBottomRef = useRef4(true);
+  const lastScrollHeightRef = useRef4(0);
   const handleScroll = () => {
     if (listRef.current) {
       const { scrollTop, scrollHeight, clientHeight } = listRef.current;
       isNearBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
     }
   };
-  useEffect3(() => {
+  useEffect5(() => {
     if (listRef.current && isNearBottomRef.current) {
       const currentScrollHeight = listRef.current.scrollHeight;
       if (currentScrollHeight !== lastScrollHeightRef.current) {
@@ -1800,16 +1999,16 @@ function MessageList({
 }
 
 // src/components/Chat/Composer.tsx
-import { useState as useState2, useRef as useRef3 } from "react";
+import { useState as useState4, useRef as useRef5 } from "react";
 import { Fragment, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
-  const [text, setText] = useState2("");
-  const [showMenu, setShowMenu] = useState2(false);
-  const [pendingFiles, setPendingFiles] = useState2([]);
-  const [fileError, setFileError] = useState2(null);
-  const textareaRef = useRef3(null);
-  const fileInputRef = useRef3(null);
-  const menuButtonRef = useRef3(null);
+  const [text, setText] = useState4("");
+  const [showMenu, setShowMenu] = useState4(false);
+  const [pendingFiles, setPendingFiles] = useState4([]);
+  const [fileError, setFileError] = useState4(null);
+  const textareaRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const menuButtonRef = useRef5(null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -2013,7 +2212,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
 }
 
 // src/components/Chat/CommandComposer.tsx
-import { useState as useState3, useRef as useRef4 } from "react";
+import { useState as useState5, useRef as useRef6 } from "react";
 import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function CommandComposer({
   onExecute,
@@ -2031,13 +2230,13 @@ function CommandComposer({
   placeholder = "Enter your command...",
   disabled = false
 }) {
-  const [input, setInput] = useState3("");
-  const [pendingFiles, setPendingFiles] = useState3([]);
-  const [fileError, setFileError] = useState3(null);
-  const [showMenu, setShowMenu] = useState3(false);
-  const inputRef = useRef4(null);
-  const fileInputRef = useRef4(null);
-  const menuButtonRef = useRef4(null);
+  const [input, setInput] = useState5("");
+  const [pendingFiles, setPendingFiles] = useState5([]);
+  const [fileError, setFileError] = useState5(null);
+  const [showMenu, setShowMenu] = useState5(false);
+  const inputRef = useRef6(null);
+  const fileInputRef = useRef6(null);
+  const menuButtonRef = useRef6(null);
   const handleSubmit = () => {
     const hasText = input.trim();
     const hasFiles = pendingFiles.length > 0;
@@ -2566,25 +2765,25 @@ var Chat = forwardRef(function Chat2({
   onWidgetRender,
   className
 }, ref) {
-  const [messages, setMessages] = useState4(initialMessages);
-  const [isLoading, setIsLoading] = useState4(false);
-  const [currentThreadId, setCurrentThreadId] = useState4(threadId || null);
-  const [mode, setMode] = useState4(initialMode);
-  const [chatToolName, setChatToolName] = useState4(null);
-  const [commandState, setCommandState] = useState4("idle");
-  const [commandResult, setCommandResult] = useState4(null);
-  const [commandError, setCommandError] = useState4(null);
-  const [progress, setProgress] = useState4(0);
-  const [commandInput, setCommandInput] = useState4("");
-  const [streamedContent, setStreamedContent] = useState4("");
-  const [currentToolName, setCurrentToolName] = useState4(null);
-  const [currentRequestId, setCurrentRequestId] = useState4(null);
-  const [plan, setPlan] = useState4("");
-  const [pendingCommand, setPendingCommand] = useState4("");
-  const [internalPlanMode, setInternalPlanMode] = useState4(planMode);
-  const [showSettingsMenu, setShowSettingsMenu] = useState4(false);
-  const fileInputRef = useRef5(null);
-  const handleSendMessageRef = useRef5(null);
+  const [messages, setMessages] = useState6(initialMessages);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [currentThreadId, setCurrentThreadId] = useState6(threadId || null);
+  const [mode, setMode] = useState6(initialMode);
+  const [chatToolName, setChatToolName] = useState6(null);
+  const [commandState, setCommandState] = useState6("idle");
+  const [commandResult, setCommandResult] = useState6(null);
+  const [commandError, setCommandError] = useState6(null);
+  const [progress, setProgress] = useState6(0);
+  const [commandInput, setCommandInput] = useState6("");
+  const [streamedContent, setStreamedContent] = useState6("");
+  const [currentToolName, setCurrentToolName] = useState6(null);
+  const [currentRequestId, setCurrentRequestId] = useState6(null);
+  const [plan, setPlan] = useState6("");
+  const [pendingCommand, setPendingCommand] = useState6("");
+  const [internalPlanMode, setInternalPlanMode] = useState6(planMode);
+  const [showSettingsMenu, setShowSettingsMenu] = useState6(false);
+  const fileInputRef = useRef7(null);
+  const handleSendMessageRef = useRef7(null);
   useImperativeHandle(ref, () => ({
     sendMessage: async (text) => {
       if (handleSendMessageRef.current) {
@@ -2605,7 +2804,7 @@ var Chat = forwardRef(function Chat2({
     return context ? `${context}
 ${widgetContext}` : widgetContext;
   }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
         ...apiUrl && { apiUrl },
@@ -2613,15 +2812,15 @@ ${widgetContext}` : widgetContext;
       });
     }
   }, [apiUrl, apiKey]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (threadId) {
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  useEffect4(() => {
+  useEffect6(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect4(() => {
+  useEffect6(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -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);
                   onToolCall?.(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;
                     onToolResult?.(toolSegment.name, chunk.content);
                   }
                   setChatToolName(null);
@@ -3153,11 +3377,11 @@ ${planToExecute}`;
 });
 
 // src/components/Chat/CommandOutput.tsx
-import { useState as useState5 } from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
-import React, { useState as useState6, useEffect as useEffect5 } from "react";
+import React, { useState as useState8, useEffect as useEffect7 } from "react";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function Command({
   agentId,
@@ -3185,28 +3409,28 @@ function Command({
   resultRenderer,
   className
 }) {
-  const [state, setState] = useState6("idle");
-  const [result, setResult] = useState6(null);
-  const [error, setError] = useState6(null);
-  const [progress, setProgress] = useState6(0);
-  const [command, setCommand] = useState6(initialCommand || "");
-  const [streamedContent, setStreamedContent] = useState6("");
-  const [plan, setPlan] = useState6("");
-  const [pendingCommand, setPendingCommand] = useState6("");
-  const [showPlanDetails, setShowPlanDetails] = useState6(false);
-  const [uploadedFiles, setUploadedFiles] = useState6([]);
-  const [showSettingsMenu, setShowSettingsMenu] = useState6(false);
-  const [internalPlanMode, setInternalPlanMode] = useState6(planMode);
+  const [state, setState] = useState8("idle");
+  const [result, setResult] = useState8(null);
+  const [error, setError] = useState8(null);
+  const [progress, setProgress] = useState8(0);
+  const [command, setCommand] = useState8(initialCommand || "");
+  const [streamedContent, setStreamedContent] = useState8("");
+  const [plan, setPlan] = useState8("");
+  const [pendingCommand, setPendingCommand] = useState8("");
+  const [showPlanDetails, setShowPlanDetails] = useState8(false);
+  const [uploadedFiles, setUploadedFiles] = useState8([]);
+  const [showSettingsMenu, setShowSettingsMenu] = useState8(false);
+  const [internalPlanMode, setInternalPlanMode] = useState8(planMode);
   const fileInputRef = React.useRef(null);
-  useEffect5(() => {
+  useEffect7(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect5(() => {
+  useEffect7(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect5(() => {
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -4128,7 +4352,7 @@ ${planToExecute}`;
 }
 
 // src/components/Prompt/Prompt.tsx
-import { useState as useState7 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function Prompt({
   agentId,
@@ -4146,9 +4370,9 @@ function Prompt({
   showSuggestions = false,
   className
 }) {
-  const [value, setValue] = useState7(initialValue);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [suggestions] = useState7(["Plan a trip", "Write a description", "Analyze data"]);
+  const [value, setValue] = useState9(initialValue);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [suggestions] = useState9(["Plan a trip", "Write a description", "Analyze data"]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
@@ -4239,7 +4463,7 @@ function Prompt({
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState8, useEffect as useEffect6 } from "react";
+import { useState as useState10, useEffect as useEffect8 } from "react";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function Stream({
   agentId,
@@ -4256,10 +4480,10 @@ function Stream({
   typingSpeed = 30,
   className
 }) {
-  const [text, setText] = useState8("");
-  const [isStreaming, setIsStreaming] = useState8(false);
-  const [isComplete, setIsComplete] = useState8(false);
-  useEffect6(() => {
+  const [text, setText] = useState10("");
+  const [isStreaming, setIsStreaming] = useState10(false);
+  const [isComplete, setIsComplete] = useState10(false);
+  useEffect8(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -4336,7 +4560,7 @@ function Stream({
 }
 
 // src/components/Threads/ThreadList.tsx
-import { useState as useState9 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -4400,7 +4624,7 @@ function ThreadList({
   showSearch = false,
   groupBy = "none"
 }) {
-  const [searchQuery, setSearchQuery] = useState9("");
+  const [searchQuery, setSearchQuery] = useState11("");
   const filteredThreads = threads.filter(
     (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
   );