@antipopp/agno-react 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +17,43 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
   AgnoProvider: () => AgnoProvider,
+  ComponentRegistry: () => ComponentRegistry,
+  GenerativeUIRenderer: () => GenerativeUIRenderer,
   ToolHandlerProvider: () => ToolHandlerProvider,
+  createAreaChart: () => createAreaChart,
+  createArtifact: () => createArtifact,
+  createBarChart: () => createBarChart,
+  createCard: () => createCard,
+  createCardGrid: () => createCardGrid,
+  createColumn: () => createColumn,
+  createLineChart: () => createLineChart,
+  createMarkdown: () => createMarkdown,
+  createPieChart: () => createPieChart,
+  createSmartChart: () => createSmartChart,
+  createTable: () => createTable,
+  createToolResult: () => createToolResult,
+  getChartComponent: () => getChartComponent,
+  getComponentRegistry: () => getComponentRegistry,
+  getCustomRender: () => getCustomRender,
+  registerChartComponent: () => registerChartComponent,
+  resultWithBarChart: () => resultWithBarChart,
+  resultWithCardGrid: () => resultWithCardGrid,
+  resultWithSmartChart: () => resultWithSmartChart,
+  resultWithTable: () => resultWithTable,
   useAgnoActions: () => useAgnoActions,
   useAgnoChat: () => useAgnoChat,
   useAgnoClient: () => useAgnoClient,
@@ -79,35 +111,661 @@ function useToolHandlers() {
   return (0, import_react2.useContext)(ToolHandlerContext);
 }
 
-// src/hooks/useAgnoChat.ts
+// src/components/GenerativeUIRenderer.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/utils/component-registry.ts
+var ComponentRegistry = class _ComponentRegistry {
+  constructor() {
+    this.components = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Get the singleton instance
+   */
+  static getInstance() {
+    if (!_ComponentRegistry.instance) {
+      _ComponentRegistry.instance = new _ComponentRegistry();
+    }
+    return _ComponentRegistry.instance;
+  }
+  /**
+   * Register a component renderer
+   */
+  register(type, renderer) {
+    this.components.set(type, renderer);
+  }
+  /**
+   * Register multiple components at once
+   */
+  registerBatch(components) {
+    Object.entries(components).forEach(([type, renderer]) => {
+      this.register(type, renderer);
+    });
+  }
+  /**
+   * Get a registered component renderer
+   */
+  get(type) {
+    return this.components.get(type);
+  }
+  /**
+   * Check if a component is registered
+   */
+  has(type) {
+    return this.components.has(type);
+  }
+  /**
+   * Unregister a component
+   */
+  unregister(type) {
+    this.components.delete(type);
+  }
+  /**
+   * Get all registered component types
+   */
+  getRegisteredTypes() {
+    return Array.from(this.components.keys());
+  }
+  /**
+   * Clear all registered components
+   */
+  clear() {
+    this.components.clear();
+  }
+};
+function getComponentRegistry() {
+  return ComponentRegistry.getInstance();
+}
+function registerChartComponent(name, renderer) {
+  getComponentRegistry().register(`chart:${name}`, renderer);
+}
+function getChartComponent(name) {
+  return getComponentRegistry().get(`chart:${name}`);
+}
+
+// src/hooks/useAgnoToolExecution.ts
 var import_react3 = require("react");
-function useAgnoChat() {
+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 getCustomRender(key) {
+  return customRenderRegistry.get(key);
+}
+function isToolHandlerResult(value) {
+  return value && typeof value === "object" && ("data" in value || "ui" in value);
+}
+function isUIComponentSpec(value) {
+  return value && typeof value === "object" && "type" in value;
+}
+function processToolResult(result, _tool) {
+  if (isToolHandlerResult(result)) {
+    const { data, ui } = result;
+    let uiComponent = void 0;
+    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;
+      }
+    }
+    return {
+      resultData: typeof data === "string" ? data : JSON.stringify(data),
+      uiComponent
+    };
+  }
+  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;
+    }
+    return {
+      resultData: JSON.stringify(result),
+      uiComponent
+    };
+  }
+  return {
+    resultData: typeof result === "string" ? result : JSON.stringify(result),
+    uiComponent: void 0
+  };
+}
+function useAgnoToolExecution(handlers = {}, autoExecute = true) {
   const client = useAgnoClient();
-  const [messages, setMessages] = (0, import_react3.useState)(client.getMessages());
-  const [state, setState] = (0, import_react3.useState)(client.getState());
-  const [error, setError] = (0, import_react3.useState)();
+  const toolHandlerContext = useToolHandlers();
+  const mergedHandlers = (0, import_react3.useMemo)(() => {
+    const globalHandlers = toolHandlerContext?.handlers || {};
+    return { ...globalHandlers, ...handlers };
+  }, [toolHandlerContext?.handlers, handlers]);
+  const [pendingTools, setPendingTools] = (0, import_react3.useState)([]);
+  const [isPaused, setIsPaused] = (0, import_react3.useState)(false);
+  const [isExecuting, setIsExecuting] = (0, import_react3.useState)(false);
+  const [executionError, setExecutionError] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
+    const handleRunPaused = (event) => {
+      setIsPaused(true);
+      setPendingTools(event.tools);
+      setExecutionError(void 0);
+    };
+    const handleRunContinued = () => {
+      setIsPaused(false);
+      setPendingTools([]);
+      setIsExecuting(false);
+      setExecutionError(void 0);
+    };
+    client.on("run:paused", handleRunPaused);
+    client.on("run:continued", handleRunContinued);
+    return () => {
+      client.off("run:paused", handleRunPaused);
+      client.off("run:continued", handleRunContinued);
+    };
+  }, [client]);
+  const executeAndContinue = (0, import_react3.useCallback)(async () => {
+    if (!isPaused || pendingTools.length === 0) {
+      console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
+      return;
+    }
+    setIsExecuting(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)
+              })
+            };
+          }
+        })
+      );
+      const toolsWithUI = updatedTools.filter((t) => t.ui_component);
+      if (toolsWithUI.length > 0) {
+        client.emit("ui:render", {
+          tools: updatedTools,
+          runId: client.getState().pausedRunId
+        });
+      }
+      client.addToolCallsToLastMessage(updatedTools);
+      await client.continueRun(updatedTools);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      setExecutionError(errorMessage);
+      setIsExecuting(false);
+      throw error;
+    }
+  }, [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);
+          }
+        }
+      }
+    };
+    client.on("session:loaded", handleSessionLoaded);
+    return () => {
+      client.off("session:loaded", handleSessionLoaded);
+    };
+  }, [client, mergedHandlers]);
+  const executeTools = (0, import_react3.useCallback)(
+    async (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)
+              })
+            };
+          }
+        })
+      );
+    },
+    [mergedHandlers]
+  );
+  const continueWithResults = (0, import_react3.useCallback)(
+    async (tools) => {
+      if (!isPaused) {
+        throw new Error("No paused run to continue");
+      }
+      setIsExecuting(true);
+      try {
+        await client.continueRun(tools);
+      } catch (error) {
+        setIsExecuting(false);
+        throw error;
+      }
+    },
+    [client, isPaused]
+  );
   (0, import_react3.useEffect)(() => {
+    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
+      executeAndContinue();
+    }
+  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
+  return {
+    /** Whether the run is currently paused awaiting tool execution */
+    isPaused,
+    /** Whether tools are currently being executed */
+    isExecuting,
+    /** Tools awaiting execution */
+    pendingTools,
+    /** Execute all pending tools and continue the run */
+    executeAndContinue,
+    /** Execute specific tools and return results without continuing */
+    executeTools,
+    /** Continue the run with manually provided tool results */
+    continueWithResults,
+    /** Error from tool execution, if any */
+    executionError
+  };
+}
+
+// src/components/GenerativeUIRenderer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var UIErrorBoundary = class extends import_react4.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(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: [
+        /* @__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" })
+      ] });
+    }
+    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." })
+    ] });
+  }
+  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) })
+    ] });
+  }
+  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 })
+      ] }) });
+    }
+  }
+  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 })
+      ] }) });
+    }
+  }
+  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.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)) })
+    ] }) });
+  }
+  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
+    ] })
+  ] });
+}
+
+// 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
+    }
+  };
+}
+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 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;
+  if ((options?.preferredType === "pie" || yKeys.length === 1) && typeof firstItem[xKey] === "string") {
+    return createPieChart(data, yKeys[0], xKey, options);
+  }
+  if (options?.preferredType === "line" || 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
+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) => {
-      console.log("[useAgnoChat] message:update event received, messages:", updatedMessages.length);
       setMessages(updatedMessages);
     };
     const handleMessageComplete = (updatedMessages) => {
-      console.log("[useAgnoChat] message:complete event received, messages:", updatedMessages.length);
       setMessages(updatedMessages);
     };
     const handleMessageError = (errorMessage) => {
-      console.log("[useAgnoChat] message:error event received:", errorMessage);
       setError(errorMessage);
     };
     const handleStateChange = (newState) => {
-      console.log("[useAgnoChat] state:change event received");
       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:error", handleMessageError);
     client.on("state:change", handleStateChange);
-    console.log("[useAgnoChat] Initializing with messages:", client.getMessages().length);
+    client.on("ui:render", handleUIRender);
     setMessages(client.getMessages());
     setState(client.getState());
     return () => {
@@ -115,9 +773,10 @@ function useAgnoChat() {
       client.off("message:complete", handleMessageComplete);
       client.off("message:error", handleMessageError);
       client.off("state:change", handleStateChange);
+      client.off("ui:render", handleUIRender);
     };
   }, [client]);
-  const sendMessage = (0, import_react3.useCallback)(
+  const sendMessage = (0, import_react5.useCallback)(
     async (message, options) => {
       setError(void 0);
       try {
@@ -130,7 +789,7 @@ function useAgnoChat() {
     },
     [client]
   );
-  const clearMessages = (0, import_react3.useCallback)(() => {
+  const clearMessages = (0, import_react5.useCallback)(() => {
     client.clearMessages();
     setMessages([]);
     setError(void 0);
@@ -147,16 +806,16 @@ function useAgnoChat() {
 }
 
 // src/hooks/useAgnoSession.ts
-var import_react4 = require("react");
+var import_react6 = require("react");
 function useAgnoSession() {
   const client = useAgnoClient();
-  const [sessions, setSessions] = (0, import_react4.useState)([]);
-  const [currentSessionId, setCurrentSessionId] = (0, import_react4.useState)(
+  const [sessions, setSessions] = (0, import_react6.useState)([]);
+  const [currentSessionId, setCurrentSessionId] = (0, import_react6.useState)(
     client.getConfig().sessionId
   );
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)();
-  (0, import_react4.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
     const handleSessionLoaded = (sessionId) => {
       setCurrentSessionId(sessionId);
     };
@@ -180,7 +839,7 @@ function useAgnoSession() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const loadSession = (0, import_react4.useCallback)(
+  const loadSession = (0, import_react6.useCallback)(
     async (sessionId) => {
       setIsLoading(true);
       setError(void 0);
@@ -198,7 +857,7 @@ function useAgnoSession() {
     },
     [client]
   );
-  const fetchSessions = (0, import_react4.useCallback)(async () => {
+  const fetchSessions = (0, import_react6.useCallback)(async () => {
     setIsLoading(true);
     setError(void 0);
     try {
@@ -224,12 +883,12 @@ function useAgnoSession() {
 }
 
 // src/hooks/useAgnoActions.ts
-var import_react5 = require("react");
+var import_react7 = 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 () => {
+  const [isInitializing, setIsInitializing] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)();
+  const initialize = (0, import_react7.useCallback)(async () => {
     setIsInitializing(true);
     setError(void 0);
     try {
@@ -243,7 +902,7 @@ function useAgnoActions() {
       setIsInitializing(false);
     }
   }, [client]);
-  const checkStatus = (0, import_react5.useCallback)(async () => {
+  const checkStatus = (0, import_react7.useCallback)(async () => {
     setError(void 0);
     try {
       return await client.checkStatus();
@@ -253,7 +912,7 @@ function useAgnoActions() {
       return false;
     }
   }, [client]);
-  const fetchAgents = (0, import_react5.useCallback)(async () => {
+  const fetchAgents = (0, import_react7.useCallback)(async () => {
     setError(void 0);
     try {
       return await client.fetchAgents();
@@ -263,7 +922,7 @@ function useAgnoActions() {
       throw err;
     }
   }, [client]);
-  const fetchTeams = (0, import_react5.useCallback)(async () => {
+  const fetchTeams = (0, import_react7.useCallback)(async () => {
     setError(void 0);
     try {
       return await client.fetchTeams();
@@ -273,7 +932,7 @@ function useAgnoActions() {
       throw err;
     }
   }, [client]);
-  const updateConfig = (0, import_react5.useCallback)(
+  const updateConfig = (0, import_react7.useCallback)(
     (updates) => {
       client.updateConfig(updates);
     },
@@ -289,170 +948,32 @@ function useAgnoActions() {
     error
   };
 }
-
-// src/hooks/useAgnoToolExecution.ts
-var import_react6 = require("react");
-function useAgnoToolExecution(handlers = {}, autoExecute = true) {
-  const client = useAgnoClient();
-  const toolHandlerContext = useToolHandlers();
-  const mergedHandlers = (0, import_react6.useMemo)(() => {
-    const globalHandlers = toolHandlerContext?.handlers || {};
-    return { ...globalHandlers, ...handlers };
-  }, [toolHandlerContext?.handlers, handlers]);
-  const [pendingTools, setPendingTools] = (0, import_react6.useState)([]);
-  const [isPaused, setIsPaused] = (0, import_react6.useState)(false);
-  const [isExecuting, setIsExecuting] = (0, import_react6.useState)(false);
-  const [executionError, setExecutionError] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
-    const handleRunPaused = (event) => {
-      console.log("[useAgnoToolExecution] Run paused event received");
-      console.log("[useAgnoToolExecution] Event:", event);
-      console.log("[useAgnoToolExecution] Tools:", event.tools);
-      console.log("[useAgnoToolExecution] Number of tools:", event.tools?.length);
-      event.tools?.forEach((tool, idx) => {
-        console.log(`[useAgnoToolExecution] Tool ${idx}:`, {
-          name: tool.tool_name,
-          id: tool.tool_call_id,
-          args_type: typeof tool.tool_args,
-          args: tool.tool_args
-        });
-      });
-      setIsPaused(true);
-      setPendingTools(event.tools);
-      setExecutionError(void 0);
-    };
-    const handleRunContinued = () => {
-      console.log("[useAgnoToolExecution] Run continued");
-      setIsPaused(false);
-      setPendingTools([]);
-      setIsExecuting(false);
-      setExecutionError(void 0);
-    };
-    client.on("run:paused", handleRunPaused);
-    client.on("run:continued", handleRunContinued);
-    return () => {
-      client.off("run:paused", handleRunPaused);
-      client.off("run:continued", handleRunContinued);
-    };
-  }, [client]);
-  const executeAndContinue = (0, import_react6.useCallback)(async () => {
-    if (!isPaused || pendingTools.length === 0) {
-      console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
-      return;
-    }
-    setIsExecuting(true);
-    setExecutionError(void 0);
-    try {
-      console.log("[useAgnoToolExecution] Executing", pendingTools.length, "tools");
-      const updatedTools = await Promise.all(
-        pendingTools.map(async (tool) => {
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler) {
-            console.warn(`[useAgnoToolExecution] No handler for tool: ${tool.tool_name}`);
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: `No handler registered for ${tool.tool_name}`
-              })
-            };
-          }
-          try {
-            console.log(`[useAgnoToolExecution] Executing tool: ${tool.tool_name}`, tool.tool_args);
-            const result = await handler(tool.tool_args);
-            console.log(`[useAgnoToolExecution] Tool result:`, result);
-            return {
-              ...tool,
-              result: typeof result === "string" ? result : JSON.stringify(result)
-            };
-          } catch (error) {
-            console.error(`[useAgnoToolExecution] Tool execution error:`, error);
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: error instanceof Error ? error.message : String(error)
-              })
-            };
-          }
-        })
-      );
-      console.log("[useAgnoToolExecution] Continuing run with results");
-      await client.continueRun(updatedTools);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      console.error("[useAgnoToolExecution] Failed to continue run:", errorMessage);
-      setExecutionError(errorMessage);
-      setIsExecuting(false);
-      throw error;
-    }
-  }, [client, mergedHandlers, isPaused, pendingTools]);
-  const executeTools = (0, import_react6.useCallback)(
-    async (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);
-            return {
-              ...tool,
-              result: typeof result === "string" ? result : JSON.stringify(result)
-            };
-          } catch (error) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: error instanceof Error ? error.message : String(error)
-              })
-            };
-          }
-        })
-      );
-    },
-    [mergedHandlers]
-  );
-  const continueWithResults = (0, import_react6.useCallback)(
-    async (tools) => {
-      if (!isPaused) {
-        throw new Error("No paused run to continue");
-      }
-      setIsExecuting(true);
-      try {
-        await client.continueRun(tools);
-      } catch (error) {
-        setIsExecuting(false);
-        throw error;
-      }
-    },
-    [client, isPaused]
-  );
-  (0, import_react6.useEffect)(() => {
-    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
-      console.log("[useAgnoToolExecution] Auto-executing tools");
-      executeAndContinue();
-    }
-  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
-  return {
-    /** Whether the run is currently paused awaiting tool execution */
-    isPaused,
-    /** Whether tools are currently being executed */
-    isExecuting,
-    /** Tools awaiting execution */
-    pendingTools,
-    /** Execute all pending tools and continue the run */
-    executeAndContinue,
-    /** Execute specific tools and return results without continuing */
-    executeTools,
-    /** Continue the run with manually provided tool results */
-    continueWithResults,
-    /** Error from tool execution, if any */
-    executionError
-  };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgnoProvider,
+  ComponentRegistry,
+  GenerativeUIRenderer,
   ToolHandlerProvider,
+  createAreaChart,
+  createArtifact,
+  createBarChart,
+  createCard,
+  createCardGrid,
+  createColumn,
+  createLineChart,
+  createMarkdown,
+  createPieChart,
+  createSmartChart,
+  createTable,
+  createToolResult,
+  getChartComponent,
+  getComponentRegistry,
+  getCustomRender,
+  registerChartComponent,
+  resultWithBarChart,
+  resultWithCardGrid,
+  resultWithSmartChart,
+  resultWithTable,
   useAgnoActions,
   useAgnoChat,
   useAgnoClient,