@antipopp/agno-react 0.9.0 → 0.10.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() {
@@ -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,8 +154,65 @@ 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");
 var customRenderRegistry = /* @__PURE__ */ new Map();
 function registerCustomRender(renderFn) {
   const key = `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -197,6 +222,9 @@ function registerCustomRender(renderFn) {
 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);
 }
@@ -206,7 +234,7 @@ function isUIComponentSpec(value) {
 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);
@@ -345,14 +373,17 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     const handleSessionLoaded = async (_sessionId) => {
       const messages = client.getMessages();
       for (const message of messages) {
-        if (!message.tool_calls)
+        if (!message.tool_calls) {
           continue;
+        }
         for (const tool of message.tool_calls) {
-          if (tool.ui_component)
+          if (tool.ui_component) {
             continue;
+          }
           const handler = mergedHandlers[tool.tool_name];
-          if (!handler)
+          if (!handler) {
             continue;
+          }
           try {
             const result = await handler(tool.tool_args);
             const { uiComponent } = processToolResult(result, tool);
@@ -375,8 +406,9 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
       return Promise.all(
         tools.map(async (tool) => {
           const handler = mergedHandlers[tool.tool_name];
-          if (!handler)
+          if (!handler) {
             return tool;
+          }
           try {
             const result = await handler(tool.tool_args);
             const { resultData, uiComponent } = processToolResult(result, tool);
@@ -417,7 +449,13 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
       executeAndContinue();
     }
-  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
+  }, [
+    autoExecute,
+    isPaused,
+    isExecuting,
+    pendingTools.length,
+    executeAndContinue
+  ]);
   return {
     /** Whether the run is currently paused awaiting tool execution */
     isPaused,
@@ -447,14 +485,18 @@ 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;
@@ -474,10 +516,16 @@ function GenerativeUIRenderer({
         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." })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: `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." })
+        ]
+      }
+    );
   }
   if (spec.type === "chart") {
     const chartSpec = spec;
@@ -485,24 +533,30 @@ function GenerativeUIRenderer({
     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 }),
+        chartSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: chartSpec.title }),
+        chartSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", 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 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: `rounded-md border border-gray-300 p-4 ${className || ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 font-semibold", children: chartSpec.title || "Chart Data" }),
+          chartSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 text-gray-600 text-sm", children: chartSpec.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "overflow-auto rounded bg-gray-100 p-2 text-xs", 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__ */ (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 }),
+        cardGridSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: cardGridSpec.title }),
+        cardGridSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: cardGridSpec.description }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardGridRenderer, { ...cardGridSpec.props })
       ] }) });
     }
@@ -512,8 +566,8 @@ function GenerativeUIRenderer({
     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 }),
+        tableSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: tableSpec.title }),
+        tableSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: tableSpec.description }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableRenderer, { ...tableSpec.props })
       ] }) });
     }
@@ -528,100 +582,361 @@ function GenerativeUIRenderer({
   }
   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)) })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `rounded-md border p-4 ${className || ""}`, children: [
+      artifactSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-4 font-semibold", children: artifactSpec.title }),
+      artifactSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", 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,
+          {
+            onError,
+            spec: childSpec
+          },
+          index
+        )
+      ) })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border border-gray-300 rounded-md ${className || ""}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `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: "text-sm text-gray-600 mt-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mt-1 text-gray-600 text-sm", 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
-    }
-  };
-}
-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) {
+// 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 {
-    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
-    }
+    initialize,
+    checkStatus,
+    fetchAgents,
+    fetchTeams,
+    updateConfig,
+    isInitializing,
+    error
   };
 }
-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
+
+// 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,
@@ -709,9 +1024,13 @@ 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;
   if (options?.preferredType) {
     switch (options.preferredType) {
@@ -773,234 +1092,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,