@apteva/apteva-kit 0.1.17 → 0.1.18

package/dist/index.js

@@ -498,6 +498,237 @@ function validateFile(file) {
   return { valid: true };
 }
 
+// src/utils/widget-parser.ts
+function findMatchingBracket(text, startIndex) {
+  let depth = 0;
+  let inString = false;
+  let escapeNext = false;
+  for (let i = startIndex; i < text.length; i++) {
+    const char = text[i];
+    if (escapeNext) {
+      escapeNext = false;
+      continue;
+    }
+    if (char === "\\" && inString) {
+      escapeNext = true;
+      continue;
+    }
+    if (char === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (char === "[" || char === "{") {
+      depth++;
+    } else if (char === "]" || char === "}") {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+function parseWidgetsFromText(text) {
+  const segments = [];
+  let hasWidgets = false;
+  let hasPendingWidget = false;
+  let currentIndex = 0;
+  let pendingWidgetType = null;
+  let processText = text;
+  const lastWidgetStart = text.lastIndexOf("@ui:");
+  if (lastWidgetStart !== -1) {
+    const afterStart = text.slice(lastWidgetStart);
+    const typeMatch = afterStart.match(/^@ui:(\w+)/);
+    if (typeMatch) {
+      const widgetType = typeMatch[1];
+      const bracketOpenIndex = afterStart.indexOf("[");
+      if (bracketOpenIndex === -1) {
+        processText = text.slice(0, lastWidgetStart);
+        pendingWidgetType = widgetType;
+        hasPendingWidget = true;
+      } else {
+        const fullBracketStart = lastWidgetStart + bracketOpenIndex;
+        const bracketEnd = findMatchingBracket(text, fullBracketStart);
+        if (bracketEnd === -1) {
+          processText = text.slice(0, lastWidgetStart);
+          pendingWidgetType = widgetType;
+          hasPendingWidget = true;
+        }
+      }
+    }
+  }
+  if (hasPendingWidget) {
+    processText = processText.replace(/[\s:;\-–—\.]+$/g, "");
+  }
+  const startPattern = /@ui:(\w+)\[/g;
+  let match;
+  while ((match = startPattern.exec(processText)) !== null) {
+    const widgetType = match[1];
+    const bracketStart = match.index + match[0].length - 1;
+    const bracketEnd = findMatchingBracket(processText, bracketStart);
+    if (bracketEnd === -1) {
+      continue;
+    }
+    const jsonContent = processText.slice(bracketStart + 1, bracketEnd);
+    if (match.index > currentIndex) {
+      const textContent = processText.slice(currentIndex, match.index).trim();
+      if (textContent) {
+        segments.push({
+          type: "text",
+          content: textContent
+        });
+      }
+    }
+    try {
+      const trimmedJson = jsonContent.trim();
+      const props = JSON.parse(trimmedJson);
+      const widgetId = `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      segments.push({
+        type: "widget",
+        widget: {
+          type: widgetType,
+          id: widgetId,
+          props
+        }
+      });
+      hasWidgets = true;
+    } catch (e) {
+    }
+    currentIndex = bracketEnd + 1;
+    startPattern.lastIndex = currentIndex;
+  }
+  if (currentIndex < processText.length) {
+    const remainingText = processText.slice(currentIndex).trim();
+    if (remainingText) {
+      segments.push({
+        type: "text",
+        content: remainingText
+      });
+    }
+  }
+  if (segments.length === 0 && processText.trim()) {
+    segments.push({
+      type: "text",
+      content: processText.trim()
+    });
+  }
+  if (pendingWidgetType) {
+    segments.push({
+      type: "widget_pending",
+      pendingType: pendingWidgetType
+    });
+  }
+  return { segments, hasWidgets, hasPendingWidget };
+}
+
+// src/utils/widget-context.ts
+var WIDGET_DEFINITIONS = {
+  card: {
+    description: "Displays a card with title and optional description, image, footer",
+    schema: '{"title": "string", "description?": "string", "image?": "url", "footer?": "string"}',
+    example: '@ui:card[{"title": "Summary", "description": "Key findings from the analysis"}]'
+  },
+  list: {
+    description: "Displays a list of items with title, subtitle, and optional description",
+    schema: '{"items": [{"id": "string", "title": "string", "subtitle?": "string", "description?": "string", "image?": "url"}]}',
+    example: '@ui:list[{"items": [{"id": "1", "title": "First item", "subtitle": "Details"}]}]'
+  },
+  button_group: {
+    description: "Displays action buttons. User clicks are sent back to you with the button id",
+    schema: '{"buttons": [{"id": "string", "label": "string", "variant?": "primary|secondary|outline"}], "layout?": "horizontal|vertical"}',
+    example: '@ui:button_group[{"buttons": [{"id": "confirm", "label": "Confirm", "variant": "primary"}, {"id": "cancel", "label": "Cancel"}]}]'
+  },
+  form: {
+    description: "Displays an input form. Submitted data is sent back to you",
+    schema: '{"title?": "string", "fields": [{"name": "string", "type": "text|number|select|checkbox|textarea|date", "label": "string", "required?": boolean, "placeholder?": "string", "options?": [{"label": "string", "value": "string"}]}]}',
+    example: '@ui:form[{"title": "Contact", "fields": [{"name": "email", "type": "text", "label": "Email", "required": true}]}]'
+  },
+  image: {
+    description: "Displays a single image with optional caption",
+    schema: '{"src": "url", "alt": "string", "caption?": "string"}',
+    example: '@ui:image[{"src": "https://example.com/img.png", "alt": "Description", "caption": "Figure 1"}]'
+  },
+  gallery: {
+    description: "Displays multiple images in a grid or carousel layout",
+    schema: '{"images": [{"id": "string", "src": "url", "alt": "string", "caption?": "string"}], "layout?": "grid|carousel"}',
+    example: '@ui:gallery[{"images": [{"id": "1", "src": "https://example.com/1.png", "alt": "Image 1"}], "layout": "grid"}]'
+  },
+  chart: {
+    description: "Displays a chart visualization (line, bar, pie, doughnut)",
+    schema: '{"chartType": "line|bar|pie|doughnut", "title?": "string", "data": {"labels": ["string"], "datasets": [{"label": "string", "data": [number], "backgroundColor?": "string|string[]"}]}}',
+    example: '@ui:chart[{"chartType": "bar", "title": "Sales", "data": {"labels": ["Q1", "Q2"], "datasets": [{"label": "Revenue", "data": [100, 150]}]}}]'
+  },
+  map: {
+    description: "Displays an interactive map with optional markers",
+    schema: '{"center": {"lat": number, "lng": number}, "zoom?": number, "markers?": [{"id": "string", "position": {"lat": number, "lng": number}, "title": "string"}]}',
+    example: '@ui:map[{"center": {"lat": 40.7128, "lng": -74.0060}, "zoom": 12, "markers": [{"id": "1", "position": {"lat": 40.7128, "lng": -74.0060}, "title": "NYC"}]}]'
+  },
+  table: {
+    description: "Displays structured data in rows and columns",
+    schema: '{"columns": [{"key": "string", "label": "string", "align?": "left|center|right"}], "rows": [{"id?": "string", ...}], "caption?": "string", "compact?": boolean, "striped?": boolean}',
+    example: '@ui:table[{"columns": [{"key": "name", "label": "Name"}, {"key": "status", "label": "Status"}], "rows": [{"name": "Item 1", "status": "Active"}, {"name": "Item 2", "status": "Pending"}]}]'
+  }
+};
+var ALL_WIDGET_TYPES = Object.keys(WIDGET_DEFINITIONS);
+function generateWidgetContext(enabledWidgets) {
+  const widgets = enabledWidgets || ALL_WIDGET_TYPES;
+  let context = `
+## Available UI Widgets
+
+`;
+  context += `You can render rich UI components in your responses using this syntax: @ui:type[{json_props}]
+
+`;
+  context += `The widget syntax will be automatically converted to interactive UI. Users see the rendered widget, not the raw syntax.
+
+`;
+  context += `### Available widgets:
+
+`;
+  for (const type of widgets) {
+    const def = WIDGET_DEFINITIONS[type];
+    if (!def) continue;
+    context += `**${type}** - ${def.description}
+`;
+    context += `Schema: \`${def.schema}\`
+`;
+    context += `Example: \`${def.example}\`
+
+`;
+  }
+  context += `### Important notes:
+`;
+  context += `- JSON must be valid (use double quotes for strings)
+`;
+  context += `- Widget actions (button clicks, form submissions) are sent back to you
+`;
+  context += `- You can include multiple widgets in a single response
+`;
+  context += `- Combine widgets with regular text for context
+`;
+  return context;
+}
+function generateCompactWidgetContext(enabledWidgets) {
+  const widgets = enabledWidgets || ALL_WIDGET_TYPES;
+  let context = `
+UI Widgets: Use @ui:type[{props}] syntax.
+`;
+  context += `Available: ${widgets.join(", ")}
+`;
+  context += `Examples:
+`;
+  const examples = ["card", "list", "button_group"].filter((w) => widgets.includes(w));
+  for (const type of examples) {
+    const def = WIDGET_DEFINITIONS[type];
+    if (def) {
+      context += `${def.example}
+`;
+    }
+  }
+  return context;
+}
+
 // src/components/Widgets/Widgets.tsx
 
 
@@ -642,6 +873,82 @@ 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 getAlignment = (align) => {
+    switch (align) {
+      case "center":
+        return "text-center";
+      case "right":
+        return "text-right";
+      default:
+        return "text-left";
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: "w-full", children: [
+    caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "caption", { className: "px-4 py-2 text-sm text-gray-600 dark:text-gray-400 text-left bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: caption }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "th",
+      {
+        className: cn(
+          "font-semibold text-gray-900 dark:text-white",
+          compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
+          getAlignment(column.align)
+        ),
+        style: column.width ? { width: column.width } : void 0,
+        children: column.label
+      },
+      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-gray-200 dark:border-gray-700 last:border-b-0",
+            "transition-colors hover:bg-gray-50 dark:hover:bg-gray-800",
+            striped && rowIndex % 2 === 1 && "bg-gray-50/50 dark:bg-gray-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-gray-700 dark:text-gray-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
+          ))
+        },
+        row.id || rowIndex
+      )),
+      rows.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "td",
+        {
+          colSpan: columns.length,
+          className: "px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400",
+          children: "No data available"
+        }
+      ) })
+    ] })
+  ] }) }) });
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
 
 function WidgetRenderer({ widget, onAction }) {
@@ -654,6 +961,8 @@ function WidgetRenderer({ widget, onAction }) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { widget, onAction });
     case "button_group":
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonGroup, { widget, onAction });
+    case "table":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Table, { widget, onAction });
     default:
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
@@ -678,7 +987,7 @@ function Widgets({
 }) {
   _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      _optionalChain([onWidgetMount, 'optionalCall', _15 => _15(widget.id)]);
+      _optionalChain([onWidgetMount, 'optionalCall', _18 => _18(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -694,6 +1003,80 @@ function Widgets({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
+// src/components/Widgets/WidgetSkeleton.tsx
+
+function WidgetSkeleton({ type, className }) {
+  switch (type) {
+    case "card":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 space-y-3", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-full" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-5/6" })
+      ] }) });
+    case "list":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-2 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
+        ] })
+      ] }, i)) });
+    case "button_group":
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse flex gap-2", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-20" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-20" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-20" })
+      ] });
+    case "form":
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded w-24" })
+      ] });
+    case "chart":
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 p-4", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-4" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-end gap-2 h-32", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-1/2" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-3/4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-1/3" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-full" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-2/3" })
+        ] })
+      ] });
+    case "image":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg" }) });
+    case "gallery":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg" }, i)) });
+    case "map":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-48 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "w-8 h-8 text-gray-300 dark:text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+      ] }) }) });
+    case "table":
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-16" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-20" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-14" }) })
+        ] }),
+        [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex border-b border-gray-200 dark:border-gray-700 last:border-b-0", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-24" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-16" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-20" }) })
+        ] }, i))
+      ] });
+    default:
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 p-4", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-full" })
+      ] });
+  }
+}
+
 // src/components/Chat/MarkdownContent.tsx
 
 function parseInlineMarkdown(text, keyPrefix = "") {
@@ -838,9 +1221,30 @@ function ToolCall({ name, status }) {
 
 // src/components/Chat/Message.tsx
 
-function Message({ message, onAction }) {
+function Message({ message, onAction, enableWidgets }) {
   const isUser = message.role === "user";
-  const contentSegments = _optionalChain([message, 'access', _16 => _16.metadata, 'optionalAccess', _17 => _17.content_segments]);
+  const contentSegments = _optionalChain([message, 'access', _19 => _19.metadata, 'optionalAccess', _20 => _20.content_segments]);
+  const renderTextContent = (text) => {
+    if (!enableWidgets || isUser) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: text });
+    }
+    const parsed = parseWidgetsFromText(text);
+    if (parsed.segments.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: parsed.segments.map((segment, index) => {
+      if (segment.type === "text" && segment.content) {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: segment.content }, `text-${index}`);
+      }
+      if (segment.type === "widget" && segment.widget) {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`);
+      }
+      if (segment.type === "widget_pending" && segment.pendingType) {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`);
+      }
+      return null;
+    }) });
+  };
   const renderContent = () => {
     if (isUser) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
@@ -848,7 +1252,7 @@ function Message({ message, onAction }) {
     if (contentSegments && contentSegments.length > 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: contentSegments.map((segment, index) => {
         if (segment.type === "text") {
-          return segment.content ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: segment.content }, `text-${index}`) : null;
+          return segment.content ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: renderTextContent(segment.content) }, `text-${index}`) : null;
         } else if (segment.type === "tool") {
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             ToolCall,
@@ -861,7 +1265,7 @@ function Message({ message, onAction }) {
         return null;
       }) });
     }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: message.content });
+    return renderTextContent(message.content);
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
@@ -1030,7 +1434,8 @@ function MessageList({
   welcomeIcon,
   suggestedPrompts,
   welcomeVariant,
-  onPromptClick
+  onPromptClick,
+  enableWidgets
 }) {
   const listRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
@@ -1049,13 +1454,13 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
 
 
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload, onSwitchMode }) {
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
   const [text, setText] = _react.useState.call(void 0, "");
   const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
   const [pendingFiles, setPendingFiles] = _react.useState.call(void 0, []);
@@ -1112,7 +1517,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _18 => _18(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _21 => _21(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -1182,15 +1587,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
             {
               className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
               style: {
-                left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.getBoundingClientRect, 'call', _21 => _21(), 'access', _22 => _22.left]), () => ( 0)),
-                top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _23 => _23.current, 'optionalAccess', _24 => _24.getBoundingClientRect, 'call', _25 => _25(), 'access', _26 => _26.bottom]), () => ( 0))) + 8
+                left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _22 => _22.current, 'optionalAccess', _23 => _23.getBoundingClientRect, 'call', _24 => _24(), 'access', _25 => _25.left]), () => ( 0)),
+                top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.getBoundingClientRect, 'call', _28 => _28(), 'access', _29 => _29.bottom]), () => ( 0))) + 8
               },
               children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "button",
                   {
                     onClick: () => {
-                      _optionalChain([fileInputRef, 'access', _27 => _27.current, 'optionalAccess', _28 => _28.click, 'call', _29 => _29()]);
+                      _optionalChain([fileInputRef, 'access', _30 => _30.current, 'optionalAccess', _31 => _31.click, 'call', _32 => _32()]);
                       setShowMenu(false);
                     },
                     className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
@@ -1233,7 +1638,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           style: { maxHeight: "120px" }
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: onStop,
+          className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50",
+          title: "Stop generation",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+        }
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
           onClick: handleSend,
@@ -1272,6 +1685,7 @@ function CommandComposer({
   onApprove,
   onReject,
   onReset,
+  onStop,
   onExpand,
   placeholder = "Enter your command...",
   disabled = false
@@ -1300,8 +1714,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _30 => _30()]);
-    _optionalChain([inputRef, 'access', _31 => _31.current, 'optionalAccess', _32 => _32.focus, 'call', _33 => _33()]);
+    _optionalChain([onReset, 'optionalCall', _33 => _33()]);
+    _optionalChain([inputRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.focus, 'call', _36 => _36()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -1415,15 +1829,15 @@ function CommandComposer({
                   {
                     className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
-                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.getBoundingClientRect, 'call', _36 => _36(), 'access', _37 => _37.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.getBoundingClientRect, 'call', _40 => _40(), 'access', _41 => _41.bottom]), () => ( 0))) + 8
+                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _37 => _37.current, 'optionalAccess', _38 => _38.getBoundingClientRect, 'call', _39 => _39(), 'access', _40 => _40.left]), () => ( 0)),
+                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.getBoundingClientRect, 'call', _43 => _43(), 'access', _44 => _44.bottom]), () => ( 0))) + 8
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _42 => _42.current, 'optionalAccess', _43 => _43.click, 'call', _44 => _44()]);
+                            _optionalChain([fileInputRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.click, 'call', _47 => _47()]);
                             setShowMenu(false);
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
@@ -1528,6 +1942,15 @@ function CommandComposer({
               }
             )
           ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            state === "loading" && onStop && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: onStop,
+                className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50",
+                title: "Stop generation",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              }
+            ),
             (state === "success" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
@@ -1655,7 +2078,7 @@ var AptevaClient = class {
         const error = await response.json().catch(() => ({ error: "Request failed" }));
         throw new Error(error.error || `Request failed with status ${response.status}`);
       }
-      const reader = _optionalChain([response, 'access', _45 => _45.body, 'optionalAccess', _46 => _46.getReader, 'call', _47 => _47()]);
+      const reader = _optionalChain([response, 'access', _48 => _48.body, 'optionalAccess', _49 => _49.getReader, 'call', _50 => _50()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -1673,7 +2096,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _48 => _48(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _51 => _51(threadId)]);
               return;
             }
             try {
@@ -1688,10 +2111,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _49 => _49(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _52 => _52(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _50 => _50(err)]);
+      _optionalChain([onError, 'optionalCall', _53 => _53(err)]);
       throw err;
     }
   }
@@ -1731,6 +2154,27 @@ var AptevaClient = class {
     const data = await response.json();
     return data.messages;
   }
+  /**
+   * Cancel an in-progress request
+   */
+  async cancelRequest(agentId, requestId) {
+    try {
+      const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/requests/${requestId}/cancel`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey
+        }
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Cancel request failed" }));
+        throw new Error(error.error || `Cancel request failed with status ${response.status}`);
+      }
+    } catch (error) {
+      console.error("[AptevaClient] Cancel request error:", error);
+      throw error;
+    }
+  }
 };
 var aptevaClient = new AptevaClient();
 
@@ -1773,6 +2217,11 @@ function Chat({
   placeholder,
   showHeader = true,
   headerTitle = "Chat",
+  // Widget detection
+  enableWidgets = false,
+  availableWidgets,
+  compactWidgetContext = false,
+  onWidgetRender,
   className
 }) {
   const [messages, setMessages] = _react.useState.call(void 0, initialMessages);
@@ -1786,11 +2235,18 @@ function Chat({
   const [commandInput, setCommandInput] = _react.useState.call(void 0, "");
   const [streamedContent, setStreamedContent] = _react.useState.call(void 0, "");
   const [currentToolName, setCurrentToolName] = _react.useState.call(void 0, null);
+  const [currentRequestId, setCurrentRequestId] = _react.useState.call(void 0, null);
   const [plan, setPlan] = _react.useState.call(void 0, "");
   const [pendingCommand, setPendingCommand] = _react.useState.call(void 0, "");
   const [internalPlanMode, setInternalPlanMode] = _react.useState.call(void 0, planMode);
   const [showSettingsMenu, setShowSettingsMenu] = _react.useState.call(void 0, false);
   const fileInputRef = _react.useRef.call(void 0, null);
+  const effectiveContext = _react.useMemo.call(void 0, () => {
+    if (!enableWidgets) return context;
+    const widgetContext = compactWidgetContext ? generateCompactWidgetContext(availableWidgets) : generateWidgetContext(availableWidgets);
+    return context ? `${context}
+${widgetContext}` : widgetContext;
+  }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
   _react.useEffect.call(void 0, () => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
@@ -1801,7 +2257,7 @@ function Chat({
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _51 => _51(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _54 => _54(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -1819,7 +2275,7 @@ function Chat({
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _52 => _52(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _55 => _55(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -1839,7 +2295,7 @@ function Chat({
       metadata: hasFiles ? { attachments: fileNames } : void 0
     };
     setMessages((prev) => [...prev, userMessage]);
-    _optionalChain([onMessageSent, 'optionalCall', _53 => _53(userMessage)]);
+    _optionalChain([onMessageSent, 'optionalCall', _56 => _56(userMessage)]);
     setIsLoading(true);
     try {
       const messagePayload = await buildMessageWithAttachments(text, files);
@@ -1895,7 +2351,7 @@ function Chat({
             message: messagePayload,
             stream: true,
             ...currentThreadId && { thread_id: currentThreadId },
-            ...context && { system: context }
+            ...effectiveContext && { system: effectiveContext }
           },
           (chunk) => {
             switch (chunk.type) {
@@ -1904,10 +2360,15 @@ function Chat({
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _54 => _54(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _57 => _57(chunk.thread_id)]);
                   }
                 }
                 break;
+              case "request_id":
+                if (chunk.request_id) {
+                  setCurrentRequestId(chunk.request_id);
+                }
+                break;
               case "content":
               case "token":
                 if (chunk.content) {
@@ -1936,7 +2397,7 @@ function Chat({
                   const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
-                    _optionalChain([onToolResult, 'optionalCall', _55 => _55(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _58 => _58(toolSegment.name, chunk.content)]);
                   }
                   updateMessage();
                 }
@@ -1978,9 +2439,10 @@ function Chat({
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _56 => _56(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _59 => _59(threadId2)]);
             }
             setIsLoading(false);
+            setCurrentRequestId(null);
           },
           (error) => {
             const errorMessage = {
@@ -1998,7 +2460,8 @@ function Chat({
               return [...prev, errorMessage];
             });
             setIsLoading(false);
-            _optionalChain([onError, 'optionalCall', _57 => _57(error)]);
+            setCurrentRequestId(null);
+            _optionalChain([onError, 'optionalCall', _60 => _60(error)]);
           }
         );
       }
@@ -2011,7 +2474,7 @@ function Chat({
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _58 => _58(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _61 => _61(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -2040,7 +2503,7 @@ function Chat({
       } else {
         try {
           const planningInstruction = `CRITICAL PLANNING MODE: You are ONLY creating a plan. Write a numbered list of steps describing what WOULD be done. DO NOT execute anything.`;
-          const systemMessage = context ? `${context}
+          const systemMessage = effectiveContext ? `${effectiveContext}
 
 ${planningInstruction}` : planningInstruction;
           const response = await aptevaClient.chat({
@@ -2056,7 +2519,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _59 => _59(error)]);
+          _optionalChain([onError, 'optionalCall', _62 => _62(error)]);
         }
       }
       return;
@@ -2089,12 +2552,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _60 => _60(result)]);
+              _optionalChain([onComplete, 'optionalCall', _63 => _63(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _61 => _61(error)]);
+              _optionalChain([onError, 'optionalCall', _64 => _64(error)]);
             }
           );
         } else {
@@ -2107,11 +2570,11 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _62 => _62(result)]);
+          _optionalChain([onComplete, 'optionalCall', _65 => _65(result)]);
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
-        const systemMessage = context ? `${context}
+        const systemMessage = effectiveContext ? `${effectiveContext}
 
 ${commandInstruction}` : commandInstruction;
         const messagePayload = files && files.length > 0 ? await buildMessageWithAttachments(currentCommand, files) : currentCommand;
@@ -2139,13 +2602,15 @@ ${commandInstruction}` : commandInstruction;
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _63 => _63(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _66 => _66(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _64 => _64(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _67 => _67(chunk.thread_id)]);
                 }
+              } else if (chunk.type === "request_id" && chunk.request_id) {
+                setCurrentRequestId(chunk.request_id);
               }
             },
             (threadId2) => {
@@ -2157,12 +2622,14 @@ ${commandInstruction}` : commandInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _65 => _65(result)]);
+              setCurrentRequestId(null);
+              _optionalChain([onComplete, 'optionalCall', _68 => _68(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _66 => _66(error)]);
+              setCurrentRequestId(null);
+              _optionalChain([onError, 'optionalCall', _69 => _69(error)]);
             }
           );
         } else {
@@ -2182,14 +2649,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _67 => _67(result)]);
+          _optionalChain([onComplete, 'optionalCall', _70 => _70(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _68 => _68(error)]);
+      _optionalChain([onError, 'optionalCall', _71 => _71(error)]);
     }
   };
   const resetCommand = () => {
@@ -2218,6 +2685,23 @@ ${planToExecute}`;
     setPendingCommand("");
     setCommandState("idle");
   };
+  const handleStop = async () => {
+    if (currentRequestId && agentId) {
+      try {
+        await aptevaClient.cancelRequest(agentId, currentRequestId);
+      } catch (error) {
+        console.error("Failed to cancel request:", error);
+      }
+    }
+    setIsLoading(false);
+    if (commandState === "loading") {
+      setCommandState("idle");
+      setStreamedContent("");
+      setCurrentToolName(null);
+      setProgress(0);
+    }
+    setCurrentRequestId(null);
+  };
   const isCompact = commandVariant === "compact";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col h-full", className), children: [
     showHeader && mode === "chat" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }) }),
@@ -2232,7 +2716,8 @@ ${planToExecute}`;
           welcomeIcon,
           suggestedPrompts,
           welcomeVariant,
-          onPromptClick: (prompt) => handleSendMessage(prompt)
+          onPromptClick: (prompt) => handleSendMessage(prompt),
+          enableWidgets
         }
       ),
       isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
@@ -2242,6 +2727,8 @@ ${planToExecute}`;
           onSendMessage: handleSendMessage,
           placeholder: placeholder || defaultPlaceholder,
           disabled: isLoading,
+          isLoading,
+          onStop: handleStop,
           onFileUpload,
           onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0
         }
@@ -2255,14 +2742,15 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _69 => _69.data, 'optionalAccess', _70 => _70.summary]) || _optionalChain([commandResult, 'optionalAccess', _71 => _71.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _72 => _72.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _72 => _72.data, 'optionalAccess', _73 => _73.summary]) || _optionalChain([commandResult, 'optionalAccess', _74 => _74.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _75 => _75.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
         onApprove: approvePlan,
         onReject: rejectPlan,
         onReset: resetCommand,
+        onStop: handleStop,
         onExpand: showModeToggle ? () => handleModeChange("chat") : void 0,
         placeholder: placeholder || "Enter your command..."
       }
@@ -2423,13 +2911,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _73 => _73(error2)]);
+            _optionalChain([onError, 'optionalCall', _76 => _76(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _74 => _74(error2)]);
+          _optionalChain([onError, 'optionalCall', _77 => _77(error2)]);
         }
       }
       return;
@@ -2440,7 +2928,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _75 => _75()]);
+    _optionalChain([onStart, 'optionalCall', _78 => _78()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -2451,16 +2939,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _76 => _76(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _79 => _79(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _77 => _77(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _80 => _80(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _78 => _78.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _79 => _79.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _81 => _81.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _82 => _82.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -2480,19 +2968,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _80 => _80(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _83 => _83(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _81 => _81(error2)]);
+              _optionalChain([onError, 'optionalCall', _84 => _84(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _82 => _82(next)]);
+              _optionalChain([onProgress, 'optionalCall', _85 => _85(next)]);
               return next;
             });
           }, 200);
@@ -2516,7 +3004,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _83 => _83(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _86 => _86(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -2562,16 +3050,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _84 => _84(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _87 => _87(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _85 => _85(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _88 => _88(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _86 => _86.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _87 => _87.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _89 => _89.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _90 => _90.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -2591,20 +3079,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _88 => _88(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _91 => _91(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _89 => _89(err)]);
+              _optionalChain([onError, 'optionalCall', _92 => _92(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _90 => _90(next)]);
+              _optionalChain([onProgress, 'optionalCall', _93 => _93(next)]);
               return next;
             });
           }, 200);
@@ -2660,14 +3148,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _91 => _91(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _94 => _94(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _92 => _92(error2)]);
+      _optionalChain([onError, 'optionalCall', _95 => _95(error2)]);
     }
   };
   const resetCommand = () => {
@@ -2700,14 +3188,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _93 => _93(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _96 => _96(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _94 => _94.target, 'optionalAccess', _95 => _95.result])) {
+            if (_optionalChain([event, 'access', _97 => _97.target, 'optionalAccess', _98 => _98.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -2801,7 +3289,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _96 => _96.current, 'optionalAccess', _97 => _97.click, 'call', _98 => _98()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _99 => _99.current, 'optionalAccess', _100 => _100.click, 'call', _101 => _101()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -3020,7 +3508,7 @@ ${planToExecute}`;
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _99 => _99.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _102 => _102.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3048,7 +3536,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _100 => _100.data, 'optionalAccess', _101 => _101.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _103 => _103.data, 'optionalAccess', _104 => _104.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -3099,7 +3587,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _102 => _102.current, 'optionalAccess', _103 => _103.click, 'call', _104 => _104()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _105 => _105.current, 'optionalAccess', _106 => _106.click, 'call', _107 => _107()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -3285,25 +3773,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _105 => _105(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _108 => _108(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _106 => _106(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _109 => _109(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _107 => _107(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _110 => _110(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _108 => _108(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _111 => _111(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -3398,7 +3886,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _109 => _109()]);
+    _optionalChain([onStart, 'optionalCall', _112 => _112()]);
     try {
       if (useMock) {
         const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
@@ -3406,13 +3894,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _110 => _110(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _113 => _113(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _111 => _111(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _114 => _114(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -3425,24 +3913,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _112 => _112(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _115 => _115(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _113 => _113(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _116 => _116(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _114 => _114(err)]);
+            _optionalChain([onError, 'optionalCall', _117 => _117(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _115 => _115(err)]);
+      _optionalChain([onError, 'optionalCall', _118 => _118(err)]);
       setIsStreaming(false);
     }
   };
@@ -3534,7 +4022,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _116 => _116.preview, 'optionalAccess', _117 => _117.toLowerCase, 'call', _118 => _118(), 'access', _119 => _119.includes, 'call', _120 => _120(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _119 => _119.preview, 'optionalAccess', _120 => _120.toLowerCase, 'call', _121 => _121(), 'access', _122 => _122.includes, 'call', _123 => _123(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -3556,8 +4044,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _121 => _121(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _122 => _122(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _124 => _124(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _125 => _125(thread.id)])
           },
           thread.id
         ))
@@ -3619,7 +4107,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _123 => _123(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _126 => _126(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-gray-600 hover:text-gray-900"