@antipopp/agno-react 0.9.0 → 0.11.0

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   ComponentRegistry: () => ComponentRegistry,
   GenerativeUIRenderer: () => GenerativeUIRenderer,
   ToolHandlerProvider: () => ToolHandlerProvider,
+  clearCustomRenderRegistry: () => clearCustomRenderRegistry,
   createAreaChart: () => createAreaChart,
   createArtifact: () => createArtifact,
   createBarChart: () => createBarChart,
@@ -63,60 +64,16 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/context/AgnoContext.tsx
-var import_react = require("react");
-var import_agno_client = require("@antipopp/agno-client");
-var import_jsx_runtime = require("react/jsx-runtime");
-var AgnoContext = (0, import_react.createContext)(null);
-function AgnoProvider({ config, children }) {
-  const client = (0, import_react.useMemo)(() => new import_agno_client.AgnoClient(config), []);
-  (0, import_react.useEffect)(() => {
-    client.updateConfig(config);
-  }, [client, config]);
-  (0, import_react.useEffect)(() => {
-    return () => {
-      client.removeAllListeners();
-    };
-  }, [client]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AgnoContext.Provider, { value: client, children });
-}
-function useAgnoClient() {
-  const client = (0, import_react.useContext)(AgnoContext);
-  if (!client) {
-    throw new Error("useAgnoClient must be used within an AgnoProvider");
-  }
-  return client;
-}
-
-// src/context/ToolHandlerContext.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ToolHandlerContext = (0, import_react2.createContext)(null);
-function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
-  const [handlers, setHandlers] = (0, import_react2.useState)(initialHandlers);
-  const registerHandler = (0, import_react2.useCallback)((name, handler) => {
-    setHandlers((prev) => ({ ...prev, [name]: handler }));
-  }, []);
-  const unregisterHandler = (0, import_react2.useCallback)((name) => {
-    setHandlers((prev) => {
-      const { [name]: _, ...rest } = prev;
-      return rest;
-    });
-  }, []);
-  const value = {
-    handlers,
-    registerHandler,
-    unregisterHandler
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToolHandlerContext.Provider, { value, children });
-}
-function useToolHandlers() {
-  return (0, import_react2.useContext)(ToolHandlerContext);
-}
-
 // src/components/GenerativeUIRenderer.tsx
 var import_react4 = __toESM(require("react"));
 
+// src/hooks/useAgnoToolExecution.ts
+var import_react3 = require("react");
+
+// src/context/AgnoContext.tsx
+var import_agno_client = require("@antipopp/agno-client");
+var import_react = require("react");
+
 // src/utils/component-registry.ts
 var ComponentRegistry = class _ComponentRegistry {
   constructor() {
@@ -141,9 +98,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
@@ -175,6 +132,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();
@@ -186,39 +154,157 @@ function getChartComponent(name) {
   return getComponentRegistry().get(`chart:${name}`);
 }
 
+// src/context/AgnoContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AgnoContext = (0, import_react.createContext)(null);
+function AgnoProvider({ config, children }) {
+  const clientRef = (0, import_react.useRef)(null);
+  if (clientRef.current === null) {
+    clientRef.current = new import_agno_client.AgnoClient(config);
+  }
+  const client = clientRef.current;
+  (0, import_react.useEffect)(() => {
+    client.updateConfig(config);
+  }, [client, config]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      client.dispose();
+      clearCustomRenderRegistry();
+      ComponentRegistry.resetInstance();
+    };
+  }, [client]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AgnoContext.Provider, { value: client, children });
+}
+function useAgnoClient() {
+  const client = (0, import_react.useContext)(AgnoContext);
+  if (!client) {
+    throw new Error("useAgnoClient must be used within an AgnoProvider");
+  }
+  return client;
+}
+
+// src/context/ToolHandlerContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ToolHandlerContext = (0, import_react2.createContext)(null);
+function ToolHandlerProvider({
+  handlers: initialHandlers = {},
+  children
+}) {
+  const [handlers, setHandlers] = (0, import_react2.useState)(initialHandlers);
+  const registerHandler = (0, import_react2.useCallback)((name, handler) => {
+    setHandlers((prev) => ({ ...prev, [name]: handler }));
+  }, []);
+  const unregisterHandler = (0, import_react2.useCallback)((name) => {
+    setHandlers((prev) => {
+      const { [name]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const value = {
+    handlers,
+    registerHandler,
+    unregisterHandler
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToolHandlerContext.Provider, { value, children });
+}
+function useToolHandlers() {
+  return (0, import_react2.useContext)(ToolHandlerContext);
+}
+
 // src/hooks/useAgnoToolExecution.ts
-var import_react3 = require("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),
@@ -226,17 +312,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
@@ -297,35 +373,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,
@@ -342,28 +392,20 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     }
   }, [client, mergedHandlers, isPaused, pendingTools]);
   (0, import_react3.useEffect)(() => {
-    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 () => {
@@ -371,29 +413,9 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     };
   }, [client, mergedHandlers]);
   const executeTools = (0, import_react3.useCallback)(
-    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]
@@ -414,10 +436,18 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     [client, isPaused]
   );
   (0, import_react3.useEffect)(() => {
-    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,
@@ -447,183 +477,532 @@ var UIErrorBoundary = class extends import_react4.default.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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800", children: [
+      return this.props.fallback || /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "rounded-md border border-red-300 bg-red-50 p-4 text-red-800", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Failed to render UI component" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm mt-1", children: this.state.error?.message || "Unknown error" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: renderFn(customSpec.props || {}) }) });
-      }
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Custom component not available" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm mt-1", children: "The custom render function for this component is not available." })
-    ] });
+function joinClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function renderHeader(title, description) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: title }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: description }) : null
+  ] });
+}
+function renderFromRegistry(renderer, props) {
+  if (!renderer) {
+    return void 0;
   }
-  if (spec.type === "chart") {
-    const chartSpec = spec;
-    const chartType = `chart:${chartSpec.component}`;
-    if (registry.has(chartType)) {
-      const ChartRenderer = registry.get(chartType);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
-        chartSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold mb-2", children: chartSpec.title }),
-        chartSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: chartSpec.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartRenderer, { ...chartSpec.props })
-      ] }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border border-gray-300 rounded-md ${className || ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold mb-2", children: chartSpec.title || "Chart Data" }),
-      chartSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-600 mb-2", children: chartSpec.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "text-xs bg-gray-100 p-2 rounded overflow-auto", children: JSON.stringify(chartSpec.props.data, null, 2) })
-    ] });
+  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";
   }
-  if (spec.type === "card-grid") {
-    const cardGridSpec = spec;
-    if (registry.has("card-grid")) {
-      const CardGridRenderer = registry.get("card-grid");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
-        cardGridSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold mb-2", children: cardGridSpec.title }),
-        cardGridSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: cardGridSpec.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardGridRenderer, { ...cardGridSpec.props })
-      ] }) });
-    }
+}
+function renderCustomSpec(spec, className, onError) {
+  const renderFn = getCustomRender(spec.renderKey);
+  if (renderFn) {
+    const renderedContent = renderFn(spec.props || {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: renderedContent }) });
   }
-  if (spec.type === "table") {
-    const tableSpec = spec;
-    if (registry.has("table")) {
-      const TableRenderer = registry.get("table");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
-        tableSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold mb-2", children: tableSpec.title }),
-        tableSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: tableSpec.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableRenderer, { ...tableSpec.props })
-      ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-yellow-300 bg-yellow-50 p-4 text-yellow-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Custom component not available" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm", children: "The custom render function for this component is not available." })
+      ]
     }
+  );
+}
+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__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+      renderHeader(spec.title, spec.description),
+      renderedChart
+    ] }) });
   }
-  if (spec.type === "markdown") {
-    const markdownSpec = spec;
-    if (registry.has("markdown")) {
-      const MarkdownRenderer = registry.get("markdown");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkdownRenderer, { ...markdownSpec.props }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-gray-300 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 font-semibold", children: spec.title || "Chart Data" }),
+        spec.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 text-gray-600 text-sm", children: spec.description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "overflow-auto rounded bg-gray-100 p-2 text-xs", children: JSON.stringify(spec.props.data, null, 2) })
+      ]
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: markdownSpec.props.content });
-  }
-  if (spec.type === "artifact") {
-    const artifactSpec = spec;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border rounded-md ${className || ""}`, children: [
-      artifactSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold mb-4", children: artifactSpec.title }),
-      artifactSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: artifactSpec.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-4", children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GenerativeUIRenderer, { spec: childSpec, onError }, index)) })
-    ] }) });
+  );
+}
+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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border border-gray-300 rounded-md ${className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Unsupported UI component" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-sm text-gray-600 mt-1", children: [
-      "Component type: ",
-      spec.type
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+    renderHeader(spec.title, spec.description),
+    renderedGrid
+  ] }) });
 }
-
-// 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
-    }
-  };
+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__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+    renderHeader(spec.title, spec.description),
+    renderedTable
+  ] }) });
 }
-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 renderMarkdownSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const markdownRenderer = registry.get("markdown");
+  const renderedMarkdown = renderFromRegistry(
+    markdownRenderer,
+    spec.props
+  );
+  if (!renderedMarkdown) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: spec.props.content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: renderedMarkdown }) });
 }
-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 renderArtifactSpec(spec, className, onError) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: joinClassNames("rounded-md border p-4", className), children: [
+    spec.title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-4 font-semibold", children: spec.title }) : null,
+    spec.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: spec.description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-4", children: spec.props.content.map((childSpec) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      GenerativeUIRenderer,
+      {
+        onError,
+        spec: childSpec
       },
-      showLegend: options?.showLegend ?? true,
-      height: options?.height || 400,
-      width: options?.width
+      getSpecKey(childSpec)
+    )) })
+  ] }) });
+}
+function renderUnsupportedSpec(spec, className) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-gray-300 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Unsupported UI component" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mt-1 text-gray-600 text-sm", children: [
+          "Component type: ",
+          spec.type
+        ] })
+      ]
     }
-  };
+  );
 }
-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,
+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);
+  }
+}
+
+// src/hooks/useAgnoActions.ts
+var import_react5 = require("react");
+function useAgnoActions() {
+  const client = useAgnoClient();
+  const [isInitializing, setIsInitializing] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)();
+  const initialize = (0, import_react5.useCallback)(
+    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 = (0, import_react5.useCallback)(
+    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 = (0, import_react5.useCallback)(
+    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 = (0, import_react5.useCallback)(
+    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 = (0, import_react5.useCallback)(
+    (updates) => {
+      client.updateConfig(updates);
+    },
+    [client]
+  );
+  return {
+    initialize,
+    checkStatus,
+    fetchAgents,
+    fetchTeams,
+    updateConfig,
+    isInitializing,
+    error
+  };
+}
+
+// src/hooks/useAgnoChat.ts
+var import_react6 = require("react");
+function useAgnoChat() {
+  const client = useAgnoClient();
+  const [messages, setMessages] = (0, import_react6.useState)(client.getMessages());
+  const [state, setState] = (0, import_react6.useState)(client.getState());
+  const [error, setError] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
+    const handleMessageUpdate = (updatedMessages) => {
+      setMessages(updatedMessages);
+    };
+    const handleMessageComplete = (updatedMessages) => {
+      setMessages(updatedMessages);
+    };
+    const handleMessageRefreshed = (updatedMessages) => {
+      setMessages(updatedMessages);
+    };
+    const handleMessageError = (errorMessage) => {
+      setError(errorMessage);
+    };
+    const handleStateChange = (newState) => {
+      setState(newState);
+    };
+    const handleUIRender = (event) => {
+      const { tools } = event;
+      for (const tool of tools) {
+        if (tool.ui_component) {
+          client.hydrateToolCallUI(tool.tool_call_id, tool.ui_component);
+        }
+      }
+    };
+    client.on("message:update", handleMessageUpdate);
+    client.on("message:complete", handleMessageComplete);
+    client.on("message:refreshed", handleMessageRefreshed);
+    client.on("message:error", handleMessageError);
+    client.on("state:change", handleStateChange);
+    client.on("ui:render", handleUIRender);
+    setMessages(client.getMessages());
+    setState(client.getState());
+    return () => {
+      client.off("message:update", handleMessageUpdate);
+      client.off("message:complete", handleMessageComplete);
+      client.off("message:refreshed", handleMessageRefreshed);
+      client.off("message:error", handleMessageError);
+      client.off("state:change", handleStateChange);
+      client.off("ui:render", handleUIRender);
+    };
+  }, [client]);
+  const sendMessage = (0, import_react6.useCallback)(
+    async (message, options) => {
+      setError(void 0);
+      try {
+        await client.sendMessage(message, options);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      }
+    },
+    [client]
+  );
+  const cancelRun = (0, import_react6.useCallback)(async () => {
+    try {
+      await client.cancelRun();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    }
+  }, [client]);
+  const clearMessages = (0, import_react6.useCallback)(() => {
+    client.clearMessages();
+    setMessages([]);
+    setError(void 0);
+  }, [client]);
+  return {
+    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
+var import_react7 = require("react");
+function useAgnoSession() {
+  const client = useAgnoClient();
+  const [sessions, setSessions] = (0, import_react7.useState)([]);
+  const [currentSessionId, setCurrentSessionId] = (0, import_react7.useState)(
+    client.getConfig().sessionId
+  );
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    const handleSessionLoaded = (sessionId) => {
+      setCurrentSessionId(sessionId);
+    };
+    const handleSessionCreated = (session) => {
+      setSessions((prev) => [session, ...prev]);
+      setCurrentSessionId(session.session_id);
+    };
+    const handleStateChange = () => {
+      const config = client.getConfig();
+      setCurrentSessionId(config.sessionId);
+      setSessions(client.getState().sessions);
+    };
+    client.on("session:loaded", handleSessionLoaded);
+    client.on("session:created", handleSessionCreated);
+    client.on("state:change", handleStateChange);
+    setSessions(client.getState().sessions);
+    setCurrentSessionId(client.getConfig().sessionId);
+    return () => {
+      client.off("session:loaded", handleSessionLoaded);
+      client.off("session:created", handleSessionCreated);
+      client.off("state:change", handleStateChange);
+    };
+  }, [client]);
+  const loadSession = (0, import_react7.useCallback)(
+    async (sessionId, options) => {
+      setIsLoading(true);
+      setError(void 0);
+      try {
+        const messages = await client.loadSession(sessionId, options);
+        setCurrentSessionId(sessionId);
+        return messages;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client]
+  );
+  const fetchSessions = (0, import_react7.useCallback)(
+    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,
+    loadSession,
+    fetchSessions,
+    isLoading,
+    error
+  };
+}
+
+// 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
+    }
+  };
+}
+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 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
+    }
+  };
+}
+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
@@ -709,10 +1088,15 @@ function createSmartChart(data, 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())
+    (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 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":
@@ -737,11 +1121,18 @@ function createSmartChart(data, options) {
           options
         );
       case "pie":
-        return createPieChart(data, yKeys[0], xKey, options);
+        return createPieChart(data, firstValueKey ?? "value", xKey, options);
+      default:
+        return createBarChart(
+          data,
+          xKey,
+          yKeys.map((key) => ({ key })),
+          options
+        );
     }
   }
-  if (yKeys.length === 1 && typeof firstItem[xKey] === "string") {
-    return createPieChart(data, yKeys[0], xKey, 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(
@@ -773,234 +1164,13 @@ function resultWithCardGrid(cards, options) {
 function resultWithTable(data, columns, options) {
   return createToolResult(data, createTable(data, columns, options));
 }
-
-// src/hooks/useAgnoChat.ts
-var import_react5 = require("react");
-function useAgnoChat() {
-  const client = useAgnoClient();
-  const [messages, setMessages] = (0, import_react5.useState)(client.getMessages());
-  const [state, setState] = (0, import_react5.useState)(client.getState());
-  const [error, setError] = (0, import_react5.useState)();
-  (0, import_react5.useEffect)(() => {
-    const handleMessageUpdate = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageComplete = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageRefreshed = (updatedMessages) => {
-      setMessages(updatedMessages);
-    };
-    const handleMessageError = (errorMessage) => {
-      setError(errorMessage);
-    };
-    const handleStateChange = (newState) => {
-      setState(newState);
-    };
-    const handleUIRender = (event) => {
-      const { tools } = event;
-      for (const tool of tools) {
-        if (tool.ui_component) {
-          client.hydrateToolCallUI(tool.tool_call_id, tool.ui_component);
-        }
-      }
-    };
-    client.on("message:update", handleMessageUpdate);
-    client.on("message:complete", handleMessageComplete);
-    client.on("message:refreshed", handleMessageRefreshed);
-    client.on("message:error", handleMessageError);
-    client.on("state:change", handleStateChange);
-    client.on("ui:render", handleUIRender);
-    setMessages(client.getMessages());
-    setState(client.getState());
-    return () => {
-      client.off("message:update", handleMessageUpdate);
-      client.off("message:complete", handleMessageComplete);
-      client.off("message:refreshed", handleMessageRefreshed);
-      client.off("message:error", handleMessageError);
-      client.off("state:change", handleStateChange);
-      client.off("ui:render", handleUIRender);
-    };
-  }, [client]);
-  const sendMessage = (0, import_react5.useCallback)(
-    async (message, options) => {
-      setError(void 0);
-      try {
-        await client.sendMessage(message, options);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : String(err);
-        setError(errorMessage);
-        throw err;
-      }
-    },
-    [client]
-  );
-  const clearMessages = (0, import_react5.useCallback)(() => {
-    client.clearMessages();
-    setMessages([]);
-    setError(void 0);
-  }, [client]);
-  return {
-    messages,
-    sendMessage,
-    clearMessages,
-    isStreaming: state.isStreaming,
-    isRefreshing: state.isRefreshing,
-    isPaused: state.isPaused,
-    error,
-    state
-  };
-}
-
-// src/hooks/useAgnoSession.ts
-var import_react6 = require("react");
-function useAgnoSession() {
-  const client = useAgnoClient();
-  const [sessions, setSessions] = (0, import_react6.useState)([]);
-  const [currentSessionId, setCurrentSessionId] = (0, import_react6.useState)(
-    client.getConfig().sessionId
-  );
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
-    const handleSessionLoaded = (sessionId) => {
-      setCurrentSessionId(sessionId);
-    };
-    const handleSessionCreated = (session) => {
-      setSessions((prev) => [session, ...prev]);
-      setCurrentSessionId(session.session_id);
-    };
-    const handleStateChange = () => {
-      const config = client.getConfig();
-      setCurrentSessionId(config.sessionId);
-      setSessions(client.getState().sessions);
-    };
-    client.on("session:loaded", handleSessionLoaded);
-    client.on("session:created", handleSessionCreated);
-    client.on("state:change", handleStateChange);
-    setSessions(client.getState().sessions);
-    setCurrentSessionId(client.getConfig().sessionId);
-    return () => {
-      client.off("session:loaded", handleSessionLoaded);
-      client.off("session:created", handleSessionCreated);
-      client.off("state:change", handleStateChange);
-    };
-  }, [client]);
-  const loadSession = (0, import_react6.useCallback)(
-    async (sessionId, options) => {
-      setIsLoading(true);
-      setError(void 0);
-      try {
-        const messages = await client.loadSession(sessionId, options);
-        setCurrentSessionId(sessionId);
-        return messages;
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : String(err);
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client]
-  );
-  const fetchSessions = (0, import_react6.useCallback)(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,
-    loadSession,
-    fetchSessions,
-    isLoading,
-    error
-  };
-}
-
-// src/hooks/useAgnoActions.ts
-var import_react7 = require("react");
-function useAgnoActions() {
-  const client = useAgnoClient();
-  const [isInitializing, setIsInitializing] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)();
-  const initialize = (0, import_react7.useCallback)(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 = (0, import_react7.useCallback)(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 = (0, import_react7.useCallback)(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 = (0, import_react7.useCallback)(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 = (0, import_react7.useCallback)(
-    (updates) => {
-      client.updateConfig(updates);
-    },
-    [client]
-  );
-  return {
-    initialize,
-    checkStatus,
-    fetchAgents,
-    fetchTeams,
-    updateConfig,
-    isInitializing,
-    error
-  };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgnoProvider,
   ComponentRegistry,
   GenerativeUIRenderer,
   ToolHandlerProvider,
+  clearCustomRenderRegistry,
   createAreaChart,
   createArtifact,
   createBarChart,