@apteva/apteva-kit 0.1.69 → 0.1.70

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..." })
+          ] })
+        }
       ) })
     ] })
   ] }) }) });