@antipopp/agno-react 0.9.0 → 0.11.0

package/dist/index.mjs

@@ -1,56 +1,12 @@
-// src/context/AgnoContext.tsx
-import { createContext, useContext, useMemo, useEffect } from "react";
-import { AgnoClient } from "@antipopp/agno-client";
-import { jsx } from "react/jsx-runtime";
-var AgnoContext = createContext(null);
-function AgnoProvider({ config, children }) {
-  const client = useMemo(() => new AgnoClient(config), []);
-  useEffect(() => {
-    client.updateConfig(config);
-  }, [client, config]);
-  useEffect(() => {
-    return () => {
-      client.removeAllListeners();
-    };
-  }, [client]);
-  return /* @__PURE__ */ jsx(AgnoContext.Provider, { value: client, children });
-}
-function useAgnoClient() {
-  const client = useContext(AgnoContext);
-  if (!client) {
-    throw new Error("useAgnoClient must be used within an AgnoProvider");
-  }
-  return client;
-}
+// src/components/GenerativeUIRenderer.tsx
+import React from "react";
 
-// src/context/ToolHandlerContext.tsx
-import { createContext as createContext2, useContext as useContext2, useState, useCallback } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ToolHandlerContext = createContext2(null);
-function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
-  const [handlers, setHandlers] = useState(initialHandlers);
-  const registerHandler = useCallback((name, handler) => {
-    setHandlers((prev) => ({ ...prev, [name]: handler }));
-  }, []);
-  const unregisterHandler = useCallback((name) => {
-    setHandlers((prev) => {
-      const { [name]: _, ...rest } = prev;
-      return rest;
-    });
-  }, []);
-  const value = {
-    handlers,
-    registerHandler,
-    unregisterHandler
-  };
-  return /* @__PURE__ */ jsx2(ToolHandlerContext.Provider, { value, children });
-}
-function useToolHandlers() {
-  return useContext2(ToolHandlerContext);
-}
+// src/hooks/useAgnoToolExecution.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 
-// src/components/GenerativeUIRenderer.tsx
-import React3 from "react";
+// src/context/AgnoContext.tsx
+import { AgnoClient } from "@antipopp/agno-client";
+import { createContext, useContext, useEffect, useRef } from "react";
 
 // src/utils/component-registry.ts
 var ComponentRegistry = class _ComponentRegistry {
@@ -76,9 +32,9 @@ var ComponentRegistry = class _ComponentRegistry {
    * Register multiple components at once
    */
   registerBatch(components) {
-    Object.entries(components).forEach(([type, renderer]) => {
+    for (const [type, renderer] of Object.entries(components)) {
       this.register(type, renderer);
-    });
+    }
   }
   /**
    * Get a registered component renderer
@@ -110,6 +66,17 @@ var ComponentRegistry = class _ComponentRegistry {
   clear() {
     this.components.clear();
   }
+  /**
+   * Reset the singleton instance.
+   * Call this during cleanup (e.g., when AgnoProvider unmounts) to prevent memory leaks.
+   * After calling this, getInstance() will create a fresh instance.
+   */
+  static resetInstance() {
+    if (_ComponentRegistry.instance) {
+      _ComponentRegistry.instance.clear();
+      _ComponentRegistry.instance = void 0;
+    }
+  }
 };
 function getComponentRegistry() {
   return ComponentRegistry.getInstance();
@@ -121,39 +88,157 @@ function getChartComponent(name) {
   return getComponentRegistry().get(`chart:${name}`);
 }
 
+// src/context/AgnoContext.tsx
+import { jsx } from "react/jsx-runtime";
+var AgnoContext = createContext(null);
+function AgnoProvider({ config, children }) {
+  const clientRef = useRef(null);
+  if (clientRef.current === null) {
+    clientRef.current = new AgnoClient(config);
+  }
+  const client = clientRef.current;
+  useEffect(() => {
+    client.updateConfig(config);
+  }, [client, config]);
+  useEffect(() => {
+    return () => {
+      client.dispose();
+      clearCustomRenderRegistry();
+      ComponentRegistry.resetInstance();
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsx(AgnoContext.Provider, { value: client, children });
+}
+function useAgnoClient() {
+  const client = useContext(AgnoContext);
+  if (!client) {
+    throw new Error("useAgnoClient must be used within an AgnoProvider");
+  }
+  return client;
+}
+
+// src/context/ToolHandlerContext.tsx
+import { createContext as createContext2, useCallback, useContext as useContext2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ToolHandlerContext = createContext2(null);
+function ToolHandlerProvider({
+  handlers: initialHandlers = {},
+  children
+}) {
+  const [handlers, setHandlers] = useState(initialHandlers);
+  const registerHandler = useCallback((name, handler) => {
+    setHandlers((prev) => ({ ...prev, [name]: handler }));
+  }, []);
+  const unregisterHandler = useCallback((name) => {
+    setHandlers((prev) => {
+      const { [name]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const value = {
+    handlers,
+    registerHandler,
+    unregisterHandler
+  };
+  return /* @__PURE__ */ jsx2(ToolHandlerContext.Provider, { value, children });
+}
+function useToolHandlers() {
+  return useContext2(ToolHandlerContext);
+}
+
 // src/hooks/useAgnoToolExecution.ts
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function getCustomRenderFunction(value) {
+  if (value.type !== "custom") {
+    return void 0;
+  }
+  const maybeRender = value.render;
+  return typeof maybeRender === "function" ? maybeRender : void 0;
+}
 var customRenderRegistry = /* @__PURE__ */ new Map();
 function registerCustomRender(renderFn) {
   const key = `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   customRenderRegistry.set(key, renderFn);
   return key;
 }
+function toSerializableUIComponent(spec) {
+  const renderFn = getCustomRenderFunction(spec);
+  if (!renderFn) {
+    return spec;
+  }
+  const { render: _render, ...uiWithoutRender } = spec;
+  return {
+    ...uiWithoutRender,
+    renderKey: registerCustomRender(renderFn)
+  };
+}
+async function executeToolCall(tool, handlers) {
+  const handler = handlers[tool.tool_name];
+  if (!handler) {
+    return {
+      ...tool,
+      result: JSON.stringify({
+        error: `No handler registered for ${tool.tool_name}`
+      })
+    };
+  }
+  try {
+    const result = await handler(tool.tool_args);
+    const { resultData, uiComponent } = processToolResult(result, tool);
+    return {
+      ...tool,
+      result: resultData,
+      ui_component: uiComponent
+    };
+  } catch (error) {
+    return {
+      ...tool,
+      result: JSON.stringify({
+        error: error instanceof Error ? error.message : String(error)
+      })
+    };
+  }
+}
+async function hydrateToolUIForSession(tools, handlers, onHydrate) {
+  for (const tool of tools) {
+    if (tool.ui_component) {
+      continue;
+    }
+    const handler = handlers[tool.tool_name];
+    if (!handler) {
+      continue;
+    }
+    try {
+      const result = await handler(tool.tool_args);
+      const { uiComponent } = processToolResult(result, tool);
+      if (uiComponent) {
+        onHydrate(tool.tool_call_id, uiComponent);
+      }
+    } catch (error) {
+      console.error(`Failed to hydrate UI for ${tool.tool_name}:`, error);
+    }
+  }
+}
 function getCustomRender(key) {
   return customRenderRegistry.get(key);
 }
+function clearCustomRenderRegistry() {
+  customRenderRegistry.clear();
+}
 function isToolHandlerResult(value) {
-  return value && typeof value === "object" && ("data" in value || "ui" in value);
+  return isRecord(value) && ("data" in value || "ui" in value);
 }
 function isUIComponentSpec(value) {
-  return value && typeof value === "object" && "type" in value;
+  return isRecord(value) && typeof value.type === "string";
 }
 function processToolResult(result, _tool) {
   if (isToolHandlerResult(result)) {
     const { data, ui } = result;
-    let uiComponent = void 0;
+    let uiComponent;
     if (ui) {
-      if (ui.type === "custom" && typeof ui.render === "function") {
-        const renderKey = registerCustomRender(ui.render);
-        uiComponent = {
-          ...ui,
-          renderKey,
-          render: void 0
-          // Don't store the function itself
-        };
-      } else {
-        uiComponent = ui;
-      }
+      uiComponent = toSerializableUIComponent(ui);
     }
     return {
       resultData: typeof data === "string" ? data : JSON.stringify(data),
@@ -161,17 +246,7 @@ function processToolResult(result, _tool) {
     };
   }
   if (isUIComponentSpec(result)) {
-    let uiComponent;
-    if (result.type === "custom" && typeof result.render === "function") {
-      const renderKey = registerCustomRender(result.render);
-      uiComponent = {
-        ...result,
-        renderKey,
-        render: void 0
-      };
-    } else {
-      uiComponent = result;
-    }
+    const uiComponent = toSerializableUIComponent(result);
     return {
       resultData: JSON.stringify(result),
       uiComponent
@@ -193,7 +268,7 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
       );
     }
   }, [isTeamMode]);
-  const mergedHandlers = useMemo2(() => {
+  const mergedHandlers = useMemo(() => {
     const globalHandlers = toolHandlerContext?.handlers || {};
     return { ...globalHandlers, ...handlers };
   }, [toolHandlerContext?.handlers, handlers]);
@@ -232,35 +307,9 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     setExecutionError(void 0);
     try {
       const updatedTools = await Promise.all(
-        pendingTools.map(async (tool) => {
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: `No handler registered for ${tool.tool_name}`
-              })
-            };
-          }
-          try {
-            const result = await handler(tool.tool_args);
-            const { resultData, uiComponent } = processToolResult(result, tool);
-            return {
-              ...tool,
-              result: resultData,
-              ui_component: uiComponent
-            };
-          } catch (error) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: error instanceof Error ? error.message : String(error)
-              })
-            };
-          }
-        })
+        pendingTools.map((tool) => executeToolCall(tool, mergedHandlers))
       );
-      const toolsWithUI = updatedTools.filter((t) => t.ui_component);
+      const toolsWithUI = updatedTools.filter((tool) => tool.ui_component);
       if (toolsWithUI.length > 0) {
         client.emit("ui:render", {
           tools: updatedTools,
@@ -277,28 +326,20 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     }
   }, [client, mergedHandlers, isPaused, pendingTools]);
   useEffect2(() => {
-    const handleSessionLoaded = async (_sessionId) => {
-      const messages = client.getMessages();
-      for (const message of messages) {
-        if (!message.tool_calls)
-          continue;
-        for (const tool of message.tool_calls) {
-          if (tool.ui_component)
-            continue;
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler)
-            continue;
-          try {
-            const result = await handler(tool.tool_args);
-            const { uiComponent } = processToolResult(result, tool);
-            if (uiComponent) {
-              client.hydrateToolCallUI(tool.tool_call_id, uiComponent);
-            }
-          } catch (err) {
-            console.error(`Failed to hydrate UI for ${tool.tool_name}:`, err);
-          }
+    const handleSessionLoaded = (_sessionId) => {
+      const tools = client.getMessages().flatMap((message) => message.tool_calls || []);
+      hydrateToolUIForSession(
+        tools,
+        mergedHandlers,
+        (toolCallId, uiComponent) => {
+          client.hydrateToolCallUI(toolCallId, uiComponent);
         }
-      }
+      ).catch((error) => {
+        console.error(
+          "[useAgnoToolExecution] Failed to hydrate session UI:",
+          error
+        );
+      });
     };
     client.on("session:loaded", handleSessionLoaded);
     return () => {
@@ -306,29 +347,9 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     };
   }, [client, mergedHandlers]);
   const executeTools = useCallback2(
-    async (tools) => {
+    (tools) => {
       return Promise.all(
-        tools.map(async (tool) => {
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler)
-            return tool;
-          try {
-            const result = await handler(tool.tool_args);
-            const { resultData, uiComponent } = processToolResult(result, tool);
-            return {
-              ...tool,
-              result: resultData,
-              ui_component: uiComponent
-            };
-          } catch (error) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: error instanceof Error ? error.message : String(error)
-              })
-            };
-          }
-        })
+        tools.map((tool) => executeToolCall(tool, mergedHandlers))
       );
     },
     [mergedHandlers]
@@ -349,10 +370,18 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     [client, isPaused]
   );
   useEffect2(() => {
-    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
-      executeAndContinue();
+    if (autoExecute && isPaused && !isExecuting && !executionError && pendingTools.length > 0) {
+      executeAndContinue().catch(() => {
+      });
     }
-  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
+  }, [
+    autoExecute,
+    isPaused,
+    isExecuting,
+    executionError,
+    pendingTools.length,
+    executeAndContinue
+  ]);
   return {
     /** Whether the run is currently paused awaiting tool execution */
     isPaused,
@@ -372,8 +401,8 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
 }
 
 // src/components/GenerativeUIRenderer.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var UIErrorBoundary = class extends React3.Component {
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var UIErrorBoundary = class extends React.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -382,340 +411,288 @@ var UIErrorBoundary = class extends React3.Component {
     return { hasError: true, error };
   }
   componentDidCatch(error, errorInfo) {
-    console.error("[GenerativeUIRenderer] Error rendering component:", error, errorInfo);
+    console.error(
+      "[GenerativeUIRenderer] Error rendering component:",
+      error,
+      errorInfo
+    );
     this.props.onError?.(error);
   }
   render() {
     if (this.state.hasError) {
-      return this.props.fallback || /* @__PURE__ */ jsxs("div", { className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800", children: [
+      return this.props.fallback || /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-red-300 bg-red-50 p-4 text-red-800", children: [
         /* @__PURE__ */ jsx3("p", { className: "font-semibold", children: "Failed to render UI component" }),
-        /* @__PURE__ */ jsx3("p", { className: "text-sm mt-1", children: this.state.error?.message || "Unknown error" })
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm", children: this.state.error?.message || "Unknown error" })
       ] });
     }
     return this.props.children;
   }
 };
-function GenerativeUIRenderer({
-  spec,
-  className,
-  onError
-}) {
-  const registry = getComponentRegistry();
-  if (spec.type === "custom") {
-    const customSpec = spec;
-    if (customSpec.renderKey) {
-      const renderFn = getCustomRender(customSpec.renderKey);
-      if (renderFn) {
-        return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsx3("div", { className, children: renderFn(customSpec.props || {}) }) });
-      }
-    }
-    return /* @__PURE__ */ jsxs("div", { className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`, children: [
-      /* @__PURE__ */ jsx3("p", { className: "font-semibold", children: "Custom component not available" }),
-      /* @__PURE__ */ jsx3("p", { className: "text-sm mt-1", children: "The custom render function for this component is not available." })
-    ] });
-  }
-  if (spec.type === "chart") {
-    const chartSpec = spec;
-    const chartType = `chart:${chartSpec.component}`;
-    if (registry.has(chartType)) {
-      const ChartRenderer = registry.get(chartType);
-      return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className, children: [
-        chartSpec.title && /* @__PURE__ */ jsx3("h3", { className: "font-semibold mb-2", children: chartSpec.title }),
-        chartSpec.description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 mb-4", children: chartSpec.description }),
-        /* @__PURE__ */ jsx3(ChartRenderer, { ...chartSpec.props })
-      ] }) });
-    }
-    return /* @__PURE__ */ jsxs("div", { className: `p-4 border border-gray-300 rounded-md ${className || ""}`, children: [
-      /* @__PURE__ */ jsx3("p", { className: "font-semibold mb-2", children: chartSpec.title || "Chart Data" }),
-      chartSpec.description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 mb-2", children: chartSpec.description }),
-      /* @__PURE__ */ jsx3("pre", { className: "text-xs bg-gray-100 p-2 rounded overflow-auto", children: JSON.stringify(chartSpec.props.data, null, 2) })
-    ] });
-  }
-  if (spec.type === "card-grid") {
-    const cardGridSpec = spec;
-    if (registry.has("card-grid")) {
-      const CardGridRenderer = registry.get("card-grid");
-      return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className, children: [
-        cardGridSpec.title && /* @__PURE__ */ jsx3("h3", { className: "font-semibold mb-2", children: cardGridSpec.title }),
-        cardGridSpec.description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 mb-4", children: cardGridSpec.description }),
-        /* @__PURE__ */ jsx3(CardGridRenderer, { ...cardGridSpec.props })
-      ] }) });
-    }
+function joinClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function renderHeader(title, description) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title ? /* @__PURE__ */ jsx3("h3", { className: "mb-2 font-semibold", children: title }) : null,
+    description ? /* @__PURE__ */ jsx3("p", { className: "mb-4 text-gray-600 text-sm", children: description }) : null
+  ] });
+}
+function renderFromRegistry(renderer, props) {
+  if (!renderer) {
+    return void 0;
   }
-  if (spec.type === "table") {
-    const tableSpec = spec;
-    if (registry.has("table")) {
-      const TableRenderer = registry.get("table");
-      return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className, children: [
-        tableSpec.title && /* @__PURE__ */ jsx3("h3", { className: "font-semibold mb-2", children: tableSpec.title }),
-        tableSpec.description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 mb-4", children: tableSpec.description }),
-        /* @__PURE__ */ jsx3(TableRenderer, { ...tableSpec.props })
-      ] }) });
-    }
+  return renderer(props);
+}
+function getSpecKey(spec) {
+  switch (spec.type) {
+    case "chart":
+      return `${spec.type}-${spec.component}-${spec.title ?? "untitled"}-${spec.props.data.length}`;
+    case "card-grid":
+      return `${spec.type}-${spec.title ?? "untitled"}-${spec.props.cards.map((card) => card.id).join("|")}`;
+    case "table":
+      return `${spec.type}-${spec.title ?? "untitled"}-${spec.props.columns.map((column) => column.key).join("|")}`;
+    case "markdown":
+      return `${spec.type}-${spec.props.content.slice(0, 48)}`;
+    case "custom":
+      return `${spec.type}-${spec.renderKey}`;
+    case "artifact":
+      return `${spec.type}-${spec.title ?? "untitled"}-${spec.props.content.length}`;
+    default:
+      return "unknown-spec";
+  }
+}
+function renderCustomSpec(spec, className, onError) {
+  const renderFn = getCustomRender(spec.renderKey);
+  if (renderFn) {
+    const renderedContent = renderFn(spec.props || {});
+    return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsx3("div", { className, children: renderedContent }) });
   }
-  if (spec.type === "markdown") {
-    const markdownSpec = spec;
-    if (registry.has("markdown")) {
-      const MarkdownRenderer = registry.get("markdown");
-      return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3(MarkdownRenderer, { ...markdownSpec.props }) }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-yellow-300 bg-yellow-50 p-4 text-yellow-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("p", { className: "font-semibold", children: "Custom component not available" }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm", children: "The custom render function for this component is not available." })
+      ]
     }
-    return /* @__PURE__ */ jsx3("div", { className, children: markdownSpec.props.content });
-  }
-  if (spec.type === "artifact") {
-    const artifactSpec = spec;
-    return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className: `p-4 border rounded-md ${className || ""}`, children: [
-      artifactSpec.title && /* @__PURE__ */ jsx3("h3", { className: "font-semibold mb-4", children: artifactSpec.title }),
-      artifactSpec.description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 mb-4", children: artifactSpec.description }),
-      /* @__PURE__ */ jsx3("div", { className: "space-y-4", children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx3(GenerativeUIRenderer, { spec: childSpec, onError }, index)) })
+  );
+}
+function renderChartSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const chartType = `chart:${spec.component}`;
+  const chartRenderer = registry.get(chartType);
+  const renderedChart = renderFromRegistry(
+    chartRenderer,
+    spec.props
+  );
+  if (renderedChart) {
+    return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className, children: [
+      renderHeader(spec.title, spec.description),
+      renderedChart
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `p-4 border border-gray-300 rounded-md ${className || ""}`, children: [
-    /* @__PURE__ */ jsx3("p", { className: "font-semibold", children: "Unsupported UI component" }),
-    /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 mt-1", children: [
-      "Component type: ",
-      spec.type
-    ] })
-  ] });
-}
-
-// src/utils/ui-helpers.ts
-function createBarChart(data, xKey, bars, options) {
-  return {
-    type: "chart",
-    component: "BarChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      xKey,
-      bars: bars.map((bar) => ({
-        key: bar.key,
-        label: bar.label || bar.key,
-        color: bar.color
-      })),
-      showLegend: options?.showLegend ?? true,
-      showGrid: options?.showGrid ?? true,
-      height: options?.height,
-      width: options?.width
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-gray-300 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("p", { className: "mb-2 font-semibold", children: spec.title || "Chart Data" }),
+        spec.description ? /* @__PURE__ */ jsx3("p", { className: "mb-2 text-gray-600 text-sm", children: spec.description }) : null,
+        /* @__PURE__ */ jsx3("pre", { className: "overflow-auto rounded bg-gray-100 p-2 text-xs", children: JSON.stringify(spec.props.data, null, 2) })
+      ]
     }
-  };
+  );
 }
-function createLineChart(data, xKey, lines, options) {
-  return {
-    type: "chart",
-    component: "LineChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      xKey,
-      lines: lines.map((line) => ({
-        key: line.key,
-        label: line.label || line.key,
-        color: line.color
-      })),
-      showLegend: options?.showLegend ?? true,
-      showGrid: options?.showGrid ?? true,
-      height: options?.height,
-      width: options?.width
-    }
-  };
+function renderCardGridSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const cardGridRenderer = registry.get("card-grid");
+  const renderedGrid = renderFromRegistry(
+    cardGridRenderer,
+    spec.props
+  );
+  if (!renderedGrid) {
+    return renderUnsupportedSpec(spec, className);
+  }
+  return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className, children: [
+    renderHeader(spec.title, spec.description),
+    renderedGrid
+  ] }) });
 }
-function createPieChart(data, dataKey, nameKey, options) {
-  return {
-    type: "chart",
-    component: "PieChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      pie: {
-        dataKey,
-        nameKey,
-        label: options?.showLabel ?? true
+function renderTableSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const tableRenderer = registry.get("table");
+  const renderedTable = renderFromRegistry(
+    tableRenderer,
+    spec.props
+  );
+  if (!renderedTable) {
+    return renderUnsupportedSpec(spec, className);
+  }
+  return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className, children: [
+    renderHeader(spec.title, spec.description),
+    renderedTable
+  ] }) });
+}
+function renderMarkdownSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const markdownRenderer = registry.get("markdown");
+  const renderedMarkdown = renderFromRegistry(
+    markdownRenderer,
+    spec.props
+  );
+  if (!renderedMarkdown) {
+    return /* @__PURE__ */ jsx3("div", { className, children: spec.props.content });
+  }
+  return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsx3("div", { className, children: renderedMarkdown }) });
+}
+function renderArtifactSpec(spec, className, onError) {
+  return /* @__PURE__ */ jsx3(UIErrorBoundary, { onError, children: /* @__PURE__ */ jsxs("div", { className: joinClassNames("rounded-md border p-4", className), children: [
+    spec.title ? /* @__PURE__ */ jsx3("h3", { className: "mb-4 font-semibold", children: spec.title }) : null,
+    spec.description ? /* @__PURE__ */ jsx3("p", { className: "mb-4 text-gray-600 text-sm", children: spec.description }) : null,
+    /* @__PURE__ */ jsx3("div", { className: "space-y-4", children: spec.props.content.map((childSpec) => /* @__PURE__ */ jsx3(
+      GenerativeUIRenderer,
+      {
+        onError,
+        spec: childSpec
       },
-      showLegend: options?.showLegend ?? true,
-      height: options?.height || 400,
-      width: options?.width
-    }
-  };
+      getSpecKey(childSpec)
+    )) })
+  ] }) });
 }
-function createAreaChart(data, xKey, areas, options) {
-  return {
-    type: "chart",
-    component: "AreaChart",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      xKey,
-      areas: areas.map((area) => ({
-        key: area.key,
-        label: area.label || area.key,
-        color: area.color
-      })),
-      showLegend: options?.showLegend ?? true,
-      showGrid: options?.showGrid ?? true,
-      height: options?.height,
-      width: options?.width
+function renderUnsupportedSpec(spec, className) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-gray-300 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("p", { className: "font-semibold", children: "Unsupported UI component" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-gray-600 text-sm", children: [
+          "Component type: ",
+          spec.type
+        ] })
+      ]
     }
-  };
+  );
 }
-function createCardGrid(cards, options) {
-  return {
-    type: "card-grid",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      cards,
-      columns: options?.columns || { default: 1, md: 2, lg: 3 },
-      variant: options?.variant || "default"
-    }
-  };
-}
-function createCard(id, title, description, options) {
-  return {
-    id,
-    title,
-    description,
-    image: options?.image,
-    metadata: options?.metadata,
-    actions: options?.actions
-  };
-}
-function createTable(data, columns, options) {
-  return {
-    type: "table",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      data,
-      columns,
-      sortable: options?.sortable ?? true,
-      filterable: options?.filterable,
-      pagination: options?.pagination,
-      density: options?.density || "comfortable"
-    }
-  };
-}
-function createColumn(key, header, options) {
-  return {
-    key,
-    header,
-    width: options?.width,
-    sortable: options?.sortable,
-    cellType: options?.cellType || "text",
-    format: options?.format
-  };
-}
-function createMarkdown(content, options) {
-  return {
-    type: "markdown",
-    layout: options?.layout,
-    title: options?.title,
-    description: options?.description,
-    props: {
-      content,
-      syntaxHighlight: options?.syntaxHighlight ?? true
-    }
-  };
+function GenerativeUIRenderer({
+  spec,
+  className,
+  onError
+}) {
+  switch (spec.type) {
+    case "custom":
+      return renderCustomSpec(spec, className, onError);
+    case "chart":
+      return renderChartSpec(spec, className, onError);
+    case "card-grid":
+      return renderCardGridSpec(spec, className, onError);
+    case "table":
+      return renderTableSpec(spec, className, onError);
+    case "markdown":
+      return renderMarkdownSpec(spec, className, onError);
+    case "artifact":
+      return renderArtifactSpec(spec, className, onError);
+    default:
+      return renderUnsupportedSpec(spec, className);
+  }
 }
-function createArtifact(content, options) {
+
+// src/hooks/useAgnoActions.ts
+import { useCallback as useCallback3, useState as useState3 } from "react";
+function useAgnoActions() {
+  const client = useAgnoClient();
+  const [isInitializing, setIsInitializing] = useState3(false);
+  const [error, setError] = useState3();
+  const initialize = useCallback3(
+    async (options) => {
+      setIsInitializing(true);
+      setError(void 0);
+      try {
+        const result = await client.initialize(options);
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setIsInitializing(false);
+      }
+    },
+    [client]
+  );
+  const checkStatus = useCallback3(
+    async (options) => {
+      setError(void 0);
+      try {
+        return await client.checkStatus(options);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        return false;
+      }
+    },
+    [client]
+  );
+  const fetchAgents = useCallback3(
+    async (options) => {
+      setError(void 0);
+      try {
+        return await client.fetchAgents(options);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      }
+    },
+    [client]
+  );
+  const fetchTeams = useCallback3(
+    async (options) => {
+      setError(void 0);
+      try {
+        return await client.fetchTeams(options);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      }
+    },
+    [client]
+  );
+  const updateConfig = useCallback3(
+    (updates) => {
+      client.updateConfig(updates);
+    },
+    [client]
+  );
   return {
-    type: "artifact",
-    title: options?.title,
-    description: options?.description,
-    props: {
-      content,
-      variant: options?.variant || "default"
-    }
+    initialize,
+    checkStatus,
+    fetchAgents,
+    fetchTeams,
+    updateConfig,
+    isInitializing,
+    error
   };
 }
-function createSmartChart(data, options) {
-  if (!data || data.length === 0) {
-    return createBarChart([], "", [], options);
-  }
-  const firstItem = data[0];
-  const keys = Object.keys(firstItem);
-  const xKey = options?.xKey || keys.find(
-    (k) => ["name", "label", "category", "date", "time", "month", "year"].includes(k.toLowerCase())
-  ) || keys[0];
-  const numericKeys = keys.filter((k) => k !== xKey && typeof firstItem[k] === "number");
-  const yKeys = options?.yKeys || numericKeys;
-  if (options?.preferredType) {
-    switch (options.preferredType) {
-      case "bar":
-        return createBarChart(
-          data,
-          xKey,
-          yKeys.map((key) => ({ key })),
-          options
-        );
-      case "line":
-        return createLineChart(
-          data,
-          xKey,
-          yKeys.map((key) => ({ key })),
-          options
-        );
-      case "area":
-        return createAreaChart(
-          data,
-          xKey,
-          yKeys.map((key) => ({ key })),
-          options
-        );
-      case "pie":
-        return createPieChart(data, yKeys[0], xKey, options);
-    }
-  }
-  if (yKeys.length === 1 && typeof firstItem[xKey] === "string") {
-    return createPieChart(data, yKeys[0], xKey, options);
-  }
-  if (xKey.toLowerCase().includes("date") || xKey.toLowerCase().includes("time") || xKey.toLowerCase().includes("month") || xKey.toLowerCase().includes("year")) {
-    return createLineChart(
-      data,
-      xKey,
-      yKeys.map((key) => ({ key })),
-      options
-    );
-  }
-  return createBarChart(
-    data,
-    xKey,
-    yKeys.map((key) => ({ key })),
-    options
-  );
-}
-function createToolResult(data, ui) {
-  return { data, ui };
-}
-function resultWithBarChart(data, xKey, bars, options) {
-  return createToolResult(data, createBarChart(data, xKey, bars, options));
-}
-function resultWithSmartChart(data, options) {
-  return createToolResult(data, createSmartChart(data, options));
-}
-function resultWithCardGrid(cards, options) {
-  return createToolResult(cards, createCardGrid(cards, options));
-}
-function resultWithTable(data, columns, options) {
-  return createToolResult(data, createTable(data, columns, options));
-}
 
 // src/hooks/useAgnoChat.ts
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useState as useState4 } from "react";
 function useAgnoChat() {
   const client = useAgnoClient();
-  const [messages, setMessages] = useState3(client.getMessages());
-  const [state, setState] = useState3(client.getState());
-  const [error, setError] = useState3();
+  const [messages, setMessages] = useState4(client.getMessages());
+  const [state, setState] = useState4(client.getState());
+  const [error, setError] = useState4();
   useEffect3(() => {
     const handleMessageUpdate = (updatedMessages) => {
       setMessages(updatedMessages);
@@ -757,7 +734,7 @@ function useAgnoChat() {
       client.off("ui:render", handleUIRender);
     };
   }, [client]);
-  const sendMessage = useCallback3(
+  const sendMessage = useCallback4(
     async (message, options) => {
       setError(void 0);
       try {
@@ -770,7 +747,16 @@ function useAgnoChat() {
     },
     [client]
   );
-  const clearMessages = useCallback3(() => {
+  const cancelRun = useCallback4(async () => {
+    try {
+      await client.cancelRun();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    }
+  }, [client]);
+  const clearMessages = useCallback4(() => {
     client.clearMessages();
     setMessages([]);
     setError(void 0);
@@ -779,24 +765,27 @@ function useAgnoChat() {
     messages,
     sendMessage,
     clearMessages,
+    cancelRun,
     isStreaming: state.isStreaming,
     isRefreshing: state.isRefreshing,
     isPaused: state.isPaused,
+    isCancelling: state.isCancelling,
+    currentRunId: state.currentRunId,
     error,
     state
   };
 }
 
 // src/hooks/useAgnoSession.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useState as useState5 } from "react";
 function useAgnoSession() {
   const client = useAgnoClient();
-  const [sessions, setSessions] = useState4([]);
-  const [currentSessionId, setCurrentSessionId] = useState4(
+  const [sessions, setSessions] = useState5([]);
+  const [currentSessionId, setCurrentSessionId] = useState5(
     client.getConfig().sessionId
   );
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4();
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5();
   useEffect4(() => {
     const handleSessionLoaded = (sessionId) => {
       setCurrentSessionId(sessionId);
@@ -821,7 +810,7 @@ function useAgnoSession() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const loadSession = useCallback4(
+  const loadSession = useCallback5(
     async (sessionId, options) => {
       setIsLoading(true);
       setError(void 0);
@@ -839,21 +828,24 @@ function useAgnoSession() {
     },
     [client]
   );
-  const fetchSessions = useCallback4(async (options) => {
-    setIsLoading(true);
-    setError(void 0);
-    try {
-      const fetchedSessions = await client.fetchSessions(options);
-      setSessions(fetchedSessions);
-      return fetchedSessions;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
+  const fetchSessions = useCallback5(
+    async (options) => {
+      setIsLoading(true);
+      setError(void 0);
+      try {
+        const fetchedSessions = await client.fetchSessions(options);
+        setSessions(fetchedSessions);
+        return fetchedSessions;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client]
+  );
   return {
     sessions,
     currentSessionId,
@@ -864,77 +856,254 @@ function useAgnoSession() {
   };
 }
 
-// src/hooks/useAgnoActions.ts
-import { useState as useState5, useCallback as useCallback5 } from "react";
-function useAgnoActions() {
-  const client = useAgnoClient();
-  const [isInitializing, setIsInitializing] = useState5(false);
-  const [error, setError] = useState5();
-  const initialize = useCallback5(async (options) => {
-    setIsInitializing(true);
-    setError(void 0);
-    try {
-      const result = await client.initialize(options);
-      return result;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setIsInitializing(false);
+// src/utils/ui-helpers.ts
+function createBarChart(data, xKey, bars, options) {
+  return {
+    type: "chart",
+    component: "BarChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      xKey,
+      bars: bars.map((bar) => ({
+        key: bar.key,
+        label: bar.label || bar.key,
+        color: bar.color
+      })),
+      showLegend: options?.showLegend ?? true,
+      showGrid: options?.showGrid ?? true,
+      height: options?.height,
+      width: options?.width
     }
-  }, [client]);
-  const checkStatus = useCallback5(async (options) => {
-    setError(void 0);
-    try {
-      return await client.checkStatus(options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      return false;
+  };
+}
+function createLineChart(data, xKey, lines, options) {
+  return {
+    type: "chart",
+    component: "LineChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      xKey,
+      lines: lines.map((line) => ({
+        key: line.key,
+        label: line.label || line.key,
+        color: line.color
+      })),
+      showLegend: options?.showLegend ?? true,
+      showGrid: options?.showGrid ?? true,
+      height: options?.height,
+      width: options?.width
     }
-  }, [client]);
-  const fetchAgents = useCallback5(async (options) => {
-    setError(void 0);
-    try {
-      return await client.fetchAgents(options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
+  };
+}
+function createPieChart(data, dataKey, nameKey, options) {
+  return {
+    type: "chart",
+    component: "PieChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      pie: {
+        dataKey,
+        nameKey,
+        label: options?.showLabel ?? true
+      },
+      showLegend: options?.showLegend ?? true,
+      height: options?.height || 400,
+      width: options?.width
     }
-  }, [client]);
-  const fetchTeams = useCallback5(async (options) => {
-    setError(void 0);
-    try {
-      return await client.fetchTeams(options);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(errorMessage);
-      throw err;
+  };
+}
+function createAreaChart(data, xKey, areas, options) {
+  return {
+    type: "chart",
+    component: "AreaChart",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      xKey,
+      areas: areas.map((area) => ({
+        key: area.key,
+        label: area.label || area.key,
+        color: area.color
+      })),
+      showLegend: options?.showLegend ?? true,
+      showGrid: options?.showGrid ?? true,
+      height: options?.height,
+      width: options?.width
     }
-  }, [client]);
-  const updateConfig = useCallback5(
-    (updates) => {
-      client.updateConfig(updates);
-    },
-    [client]
-  );
+  };
+}
+function createCardGrid(cards, options) {
   return {
-    initialize,
-    checkStatus,
-    fetchAgents,
-    fetchTeams,
-    updateConfig,
-    isInitializing,
-    error
+    type: "card-grid",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      cards,
+      columns: options?.columns || { default: 1, md: 2, lg: 3 },
+      variant: options?.variant || "default"
+    }
   };
 }
+function createCard(id, title, description, options) {
+  return {
+    id,
+    title,
+    description,
+    image: options?.image,
+    metadata: options?.metadata,
+    actions: options?.actions
+  };
+}
+function createTable(data, columns, options) {
+  return {
+    type: "table",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      data,
+      columns,
+      sortable: options?.sortable ?? true,
+      filterable: options?.filterable,
+      pagination: options?.pagination,
+      density: options?.density || "comfortable"
+    }
+  };
+}
+function createColumn(key, header, options) {
+  return {
+    key,
+    header,
+    width: options?.width,
+    sortable: options?.sortable,
+    cellType: options?.cellType || "text",
+    format: options?.format
+  };
+}
+function createMarkdown(content, options) {
+  return {
+    type: "markdown",
+    layout: options?.layout,
+    title: options?.title,
+    description: options?.description,
+    props: {
+      content,
+      syntaxHighlight: options?.syntaxHighlight ?? true
+    }
+  };
+}
+function createArtifact(content, options) {
+  return {
+    type: "artifact",
+    title: options?.title,
+    description: options?.description,
+    props: {
+      content,
+      variant: options?.variant || "default"
+    }
+  };
+}
+function createSmartChart(data, options) {
+  if (!data || data.length === 0) {
+    return createBarChart([], "", [], options);
+  }
+  const firstItem = data[0];
+  const keys = Object.keys(firstItem);
+  const xKey = options?.xKey || keys.find(
+    (k) => ["name", "label", "category", "date", "time", "month", "year"].includes(
+      k.toLowerCase()
+    )
+  ) || keys[0];
+  const numericKeys = keys.filter(
+    (k) => k !== xKey && typeof firstItem[k] === "number"
+  );
+  const yKeys = options?.yKeys || numericKeys;
+  const firstValueKey = yKeys[0] ?? numericKeys[0];
+  if (options?.preferredType) {
+    switch (options.preferredType) {
+      case "bar":
+        return createBarChart(
+          data,
+          xKey,
+          yKeys.map((key) => ({ key })),
+          options
+        );
+      case "line":
+        return createLineChart(
+          data,
+          xKey,
+          yKeys.map((key) => ({ key })),
+          options
+        );
+      case "area":
+        return createAreaChart(
+          data,
+          xKey,
+          yKeys.map((key) => ({ key })),
+          options
+        );
+      case "pie":
+        return createPieChart(data, firstValueKey ?? "value", xKey, options);
+      default:
+        return createBarChart(
+          data,
+          xKey,
+          yKeys.map((key) => ({ key })),
+          options
+        );
+    }
+  }
+  if (yKeys.length === 1 && firstValueKey && typeof firstItem[xKey] === "string") {
+    return createPieChart(data, firstValueKey, xKey, options);
+  }
+  if (xKey.toLowerCase().includes("date") || xKey.toLowerCase().includes("time") || xKey.toLowerCase().includes("month") || xKey.toLowerCase().includes("year")) {
+    return createLineChart(
+      data,
+      xKey,
+      yKeys.map((key) => ({ key })),
+      options
+    );
+  }
+  return createBarChart(
+    data,
+    xKey,
+    yKeys.map((key) => ({ key })),
+    options
+  );
+}
+function createToolResult(data, ui) {
+  return { data, ui };
+}
+function resultWithBarChart(data, xKey, bars, options) {
+  return createToolResult(data, createBarChart(data, xKey, bars, options));
+}
+function resultWithSmartChart(data, options) {
+  return createToolResult(data, createSmartChart(data, options));
+}
+function resultWithCardGrid(cards, options) {
+  return createToolResult(cards, createCardGrid(cards, options));
+}
+function resultWithTable(data, columns, options) {
+  return createToolResult(data, createTable(data, columns, options));
+}
 export {
   AgnoProvider,
   ComponentRegistry,
   GenerativeUIRenderer,
   ToolHandlerProvider,
+  clearCustomRenderRegistry,
   createAreaChart,
   createArtifact,
   createBarChart,