@rodrigocoliveira/agno-react 1.1.6 → 1.3.0

package/dist/index.js

@@ -45,12 +45,14 @@ __export(exports_src, {
   useToolHandlers: () => useToolHandlers,
   useAgnoTraces: () => useAgnoTraces,
   useAgnoToolExecution: () => useAgnoToolExecution,
+  useAgnoSessionState: () => useAgnoSessionState,
   useAgnoSession: () => useAgnoSession,
   useAgnoMetrics: () => useAgnoMetrics,
   useAgnoMemory: () => useAgnoMemory,
   useAgnoKnowledge: () => useAgnoKnowledge,
   useAgnoEvals: () => useAgnoEvals,
   useAgnoCustomEvents: () => useAgnoCustomEvents,
+  useAgnoComponents: () => useAgnoComponents,
   useAgnoClient: () => useAgnoClient,
   useAgnoChat: () => useAgnoChat,
   useAgnoActions: () => useAgnoActions,
@@ -84,7 +86,7 @@ module.exports = __toCommonJS(exports_src);
 // src/context/AgnoContext.tsx
 var import_react = require("react");
 var import_agno_client = require("@rodrigocoliveira/agno-client");
-var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var jsx_runtime = require("react/jsx-runtime");
 var AgnoContext = import_react.createContext(null);
 function AgnoProvider({ config, children }) {
   const client = import_react.useMemo(() => new import_agno_client.AgnoClient(config), []);
@@ -96,10 +98,10 @@ function AgnoProvider({ config, children }) {
       client.removeAllListeners();
     };
   }, [client]);
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(AgnoContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime.jsx(AgnoContext.Provider, {
     value: client,
     children
-  }, undefined, false, undefined, this);
+  });
 }
 function useAgnoClient() {
   const client = import_react.useContext(AgnoContext);
@@ -110,7 +112,7 @@ function useAgnoClient() {
 }
 // src/context/ToolHandlerContext.tsx
 var import_react2 = require("react");
-var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
+var jsx_runtime2 = require("react/jsx-runtime");
 var ToolHandlerContext = import_react2.createContext(null);
 function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
   const [handlers, setHandlers] = import_react2.useState(initialHandlers);
@@ -128,10 +130,10 @@ function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
     registerHandler,
     unregisterHandler
   };
-  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(ToolHandlerContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime2.jsx(ToolHandlerContext.Provider, {
     value,
     children
-  }, undefined, false, undefined, this);
+  });
 }
 function useToolHandlers() {
   return import_react2.useContext(ToolHandlerContext);
@@ -417,7 +419,7 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true, options) {
 }
 
 // src/components/GenerativeUIRenderer.tsx
-var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
+var jsx_runtime3 = require("react/jsx-runtime");
 
 class UIErrorBoundary extends import_react4.default.Component {
   constructor(props) {
@@ -433,19 +435,19 @@ class UIErrorBoundary extends import_react4.default.Component {
   }
   render() {
     if (this.state.hasError) {
-      return this.props.fallback || /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+      return this.props.fallback || /* @__PURE__ */ jsx_runtime3.jsxs("div", {
         className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+          /* @__PURE__ */ jsx_runtime3.jsx("p", {
             className: "font-semibold",
             children: "Failed to render UI component"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx_runtime3.jsx("p", {
             className: "text-sm mt-1",
             children: this.state.error?.message || "Unknown error"
-          }, undefined, false, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this);
+      });
     }
     return this.props.children;
   }
@@ -461,183 +463,183 @@ function GenerativeUIRenderer({
     if (customSpec.renderKey) {
       const renderFn = getCustomRender(customSpec.renderKey);
       if (renderFn) {
-        return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(UIErrorBoundary, {
+        return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
           onError,
-          children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+          children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
             className,
             children: renderFn(customSpec.props || {})
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
+          })
+        });
       }
     }
-    return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
       className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`,
       children: [
-        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+        /* @__PURE__ */ jsx_runtime3.jsx("p", {
           className: "font-semibold",
           children: "Custom component not available"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+        }),
+        /* @__PURE__ */ jsx_runtime3.jsx("p", {
           className: "text-sm mt-1",
           children: "The custom render function for this component is not available."
-        }, undefined, false, undefined, this)
+        })
       ]
-    }, undefined, true, undefined, this);
+    });
   }
   if (spec.type === "chart") {
     const chartSpec = spec;
     const chartType = `chart:${chartSpec.component}`;
     if (registry.has(chartType)) {
       const ChartRenderer = registry.get(chartType);
-      return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+        children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
           className,
           children: [
-            chartSpec.title && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("h3", {
+            chartSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
               className: "font-semibold mb-2",
               children: chartSpec.title
-            }, undefined, false, undefined, this),
-            chartSpec.description && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+            }),
+            chartSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
               className: "text-sm text-gray-600 mb-4",
               children: chartSpec.description
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(ChartRenderer, {
+            }),
+            /* @__PURE__ */ jsx_runtime3.jsx(ChartRenderer, {
               ...chartSpec.props
-            }, undefined, false, undefined, this)
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this);
+        })
+      });
     }
-    return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
       className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
       children: [
-        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+        /* @__PURE__ */ jsx_runtime3.jsx("p", {
           className: "font-semibold mb-2",
           children: chartSpec.title || "Chart Data"
-        }, undefined, false, undefined, this),
-        chartSpec.description && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+        }),
+        chartSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
           className: "text-sm text-gray-600 mb-2",
           children: chartSpec.description
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("pre", {
+        }),
+        /* @__PURE__ */ jsx_runtime3.jsx("pre", {
           className: "text-xs bg-gray-100 p-2 rounded overflow-auto",
           children: JSON.stringify(chartSpec.props.data, null, 2)
-        }, undefined, false, undefined, this)
+        })
       ]
-    }, undefined, true, undefined, this);
+    });
   }
   if (spec.type === "card-grid") {
     const cardGridSpec = spec;
     if (registry.has("card-grid")) {
       const CardGridRenderer = registry.get("card-grid");
-      return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+        children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
           className,
           children: [
-            cardGridSpec.title && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("h3", {
+            cardGridSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
               className: "font-semibold mb-2",
               children: cardGridSpec.title
-            }, undefined, false, undefined, this),
-            cardGridSpec.description && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+            }),
+            cardGridSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
               className: "text-sm text-gray-600 mb-4",
               children: cardGridSpec.description
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(CardGridRenderer, {
+            }),
+            /* @__PURE__ */ jsx_runtime3.jsx(CardGridRenderer, {
               ...cardGridSpec.props
-            }, undefined, false, undefined, this)
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this);
+        })
+      });
     }
   }
   if (spec.type === "table") {
     const tableSpec = spec;
     if (registry.has("table")) {
       const TableRenderer = registry.get("table");
-      return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+        children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
           className,
           children: [
-            tableSpec.title && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("h3", {
+            tableSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
               className: "font-semibold mb-2",
               children: tableSpec.title
-            }, undefined, false, undefined, this),
-            tableSpec.description && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+            }),
+            tableSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
               className: "text-sm text-gray-600 mb-4",
               children: tableSpec.description
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(TableRenderer, {
+            }),
+            /* @__PURE__ */ jsx_runtime3.jsx(TableRenderer, {
               ...tableSpec.props
-            }, undefined, false, undefined, this)
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this);
+        })
+      });
     }
   }
   if (spec.type === "markdown") {
     const markdownSpec = spec;
     if (registry.has("markdown")) {
       const MarkdownRenderer = registry.get("markdown");
-      return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+        children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
           className,
-          children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(MarkdownRenderer, {
+          children: /* @__PURE__ */ jsx_runtime3.jsx(MarkdownRenderer, {
             ...markdownSpec.props
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this);
+          })
+        })
+      });
     }
-    return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_runtime3.jsx("div", {
       className,
       children: markdownSpec.props.content
-    }, undefined, false, undefined, this);
+    });
   }
   if (spec.type === "artifact") {
     const artifactSpec = spec;
-    return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(UIErrorBoundary, {
+    return /* @__PURE__ */ jsx_runtime3.jsx(UIErrorBoundary, {
       onError,
-      children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+      children: /* @__PURE__ */ jsx_runtime3.jsxs("div", {
         className: `p-4 border rounded-md ${className || ""}`,
         children: [
-          artifactSpec.title && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("h3", {
+          artifactSpec.title && /* @__PURE__ */ jsx_runtime3.jsx("h3", {
             className: "font-semibold mb-4",
             children: artifactSpec.title
-          }, undefined, false, undefined, this),
-          artifactSpec.description && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+          }),
+          artifactSpec.description && /* @__PURE__ */ jsx_runtime3.jsx("p", {
             className: "text-sm text-gray-600 mb-4",
             children: artifactSpec.description
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+          }),
+          /* @__PURE__ */ jsx_runtime3.jsx("div", {
             className: "space-y-4",
-            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(GenerativeUIRenderer, {
+            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx_runtime3.jsx(GenerativeUIRenderer, {
               spec: childSpec,
               onError
-            }, index, false, undefined, this))
-          }, undefined, false, undefined, this)
+            }, index))
+          })
         ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this);
+      })
+    });
   }
-  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
     className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+      /* @__PURE__ */ jsx_runtime3.jsx("p", {
         className: "font-semibold",
         children: "Unsupported UI component"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("p", {
+      }),
+      /* @__PURE__ */ jsx_runtime3.jsxs("p", {
         className: "text-sm text-gray-600 mt-1",
         children: [
           "Component type: ",
           spec.type
         ]
-      }, undefined, true, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 }
 // src/utils/ui-helpers.ts
 function createBarChart(data, xKey, bars, options) {
@@ -1336,15 +1338,59 @@ function useAgnoMemory() {
     deleteMultipleMemories
   };
 }
-// src/hooks/useAgnoKnowledge.ts
+// src/hooks/useAgnoSessionState.ts
 var import_react10 = require("react");
+function useAgnoSessionState() {
+  const client = useAgnoClient();
+  const [sessionState, setLocalSessionState] = import_react10.useState(() => client.getSessionState());
+  const [isRefreshing, setIsRefreshing] = import_react10.useState(() => client.getState().isSessionStateRefreshing ?? false);
+  import_react10.useEffect(() => {
+    const handleStateChange = (state) => {
+      setLocalSessionState(state);
+    };
+    const handleRefreshStart = () => setIsRefreshing(true);
+    const handleRefreshEnd = () => setIsRefreshing(false);
+    client.on("session-state:change", handleStateChange);
+    client.on("session-state:refresh:start", handleRefreshStart);
+    client.on("session-state:refresh:end", handleRefreshEnd);
+    setLocalSessionState(client.getSessionState());
+    setIsRefreshing(client.getState().isSessionStateRefreshing ?? false);
+    return () => {
+      client.off("session-state:change", handleStateChange);
+      client.off("session-state:refresh:start", handleRefreshStart);
+      client.off("session-state:refresh:end", handleRefreshEnd);
+    };
+  }, [client]);
+  const setSessionState = import_react10.useCallback(async (next) => {
+    const resolved = typeof next === "function" ? next(client.getSessionState()) : next;
+    await client.setSessionState(resolved);
+  }, [client]);
+  const mergeSessionState = import_react10.useCallback(async (partial) => {
+    const current = client.getSessionState() ?? {};
+    const merged = { ...current, ...partial };
+    await client.setSessionState(merged);
+  }, [client]);
+  const refreshSessionState = import_react10.useCallback(async () => {
+    const result = await client.refreshSessionState();
+    return result ?? null;
+  }, [client]);
+  return {
+    sessionState,
+    isRefreshing,
+    setSessionState,
+    mergeSessionState,
+    refreshSessionState
+  };
+}
+// src/hooks/useAgnoKnowledge.ts
+var import_react11 = require("react");
 function useAgnoKnowledge() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = import_react10.useState(false);
-  const [error, setError] = import_react10.useState();
-  const [config, setConfig] = import_react10.useState();
-  const [content, setContent] = import_react10.useState([]);
-  const getConfig = import_react10.useCallback(async (options) => {
+  const [isLoading, setIsLoading] = import_react11.useState(false);
+  const [error, setError] = import_react11.useState();
+  const [config, setConfig] = import_react11.useState();
+  const [content, setContent] = import_react11.useState([]);
+  const getConfig = import_react11.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1359,7 +1405,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const listContent = import_react10.useCallback(async (listOptions, options) => {
+  const listContent = import_react11.useCallback(async (listOptions, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1374,7 +1420,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContent = import_react10.useCallback(async (contentId, options) => {
+  const getContent = import_react11.useCallback(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1387,7 +1433,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContentStatus = import_react10.useCallback(async (contentId, options) => {
+  const getContentStatus = import_react11.useCallback(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1400,7 +1446,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const search = import_react10.useCallback(async (request, options) => {
+  const search = import_react11.useCallback(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1413,7 +1459,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const uploadContent = import_react10.useCallback(async (data, options) => {
+  const uploadContent = import_react11.useCallback(async (data, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1428,7 +1474,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateContent = import_react10.useCallback(async (contentId, request, options) => {
+  const updateContent = import_react11.useCallback(async (contentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1443,7 +1489,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteAllContent = import_react10.useCallback(async (options) => {
+  const deleteAllContent = import_react11.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1457,7 +1503,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteContent = import_react10.useCallback(async (contentId, options) => {
+  const deleteContent = import_react11.useCallback(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1489,14 +1535,14 @@ function useAgnoKnowledge() {
   };
 }
 // src/hooks/useAgnoMetrics.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useAgnoMetrics() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = import_react11.useState(false);
-  const [isRefreshing, setIsRefreshing] = import_react11.useState(false);
-  const [error, setError] = import_react11.useState();
-  const [metrics, setMetrics] = import_react11.useState();
-  const fetchMetrics = import_react11.useCallback(async (options) => {
+  const [isLoading, setIsLoading] = import_react12.useState(false);
+  const [isRefreshing, setIsRefreshing] = import_react12.useState(false);
+  const [error, setError] = import_react12.useState();
+  const [metrics, setMetrics] = import_react12.useState();
+  const fetchMetrics = import_react12.useCallback(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1511,7 +1557,7 @@ function useAgnoMetrics() {
       setIsLoading(false);
     }
   }, [client]);
-  const refreshMetrics = import_react11.useCallback(async (options) => {
+  const refreshMetrics = import_react12.useCallback(async (options) => {
     setIsRefreshing(true);
     setError(undefined);
     try {
@@ -1525,7 +1571,7 @@ function useAgnoMetrics() {
       setIsRefreshing(false);
     }
   }, [client]);
-  const clearMetrics = import_react11.useCallback(() => {
+  const clearMetrics = import_react12.useCallback(() => {
     setMetrics(undefined);
     setError(undefined);
   }, []);
@@ -1540,14 +1586,14 @@ function useAgnoMetrics() {
   };
 }
 // src/hooks/useAgnoEvals.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useAgnoEvals() {
   const client = useAgnoClient();
-  const [evalRuns, setEvalRuns] = import_react12.useState([]);
-  const [pagination, setPagination] = import_react12.useState();
-  const [isLoading, setIsLoading] = import_react12.useState(false);
-  const [error, setError] = import_react12.useState();
-  const listEvalRuns = import_react12.useCallback(async (listParams = {}, options) => {
+  const [evalRuns, setEvalRuns] = import_react13.useState([]);
+  const [pagination, setPagination] = import_react13.useState();
+  const [isLoading, setIsLoading] = import_react13.useState(false);
+  const [error, setError] = import_react13.useState();
+  const listEvalRuns = import_react13.useCallback(async (listParams = {}, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1563,7 +1609,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const getEvalRun = import_react12.useCallback(async (evalRunId, options) => {
+  const getEvalRun = import_react13.useCallback(async (evalRunId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1576,7 +1622,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const executeEval = import_react12.useCallback(async (request, options) => {
+  const executeEval = import_react13.useCallback(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1591,7 +1637,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateEvalRun = import_react12.useCallback(async (evalRunId, request, options) => {
+  const updateEvalRun = import_react13.useCallback(async (evalRunId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1606,7 +1652,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteEvalRuns = import_react12.useCallback(async (evalRunIds, options) => {
+  const deleteEvalRuns = import_react13.useCallback(async (evalRunIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1621,7 +1667,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const renameEvalRun = import_react12.useCallback(async (evalRunId, newName, options) => {
+  const renameEvalRun = import_react13.useCallback(async (evalRunId, newName, options) => {
     return updateEvalRun(evalRunId, { name: newName }, options);
   }, [updateEvalRun]);
   return {
@@ -1638,14 +1684,14 @@ function useAgnoEvals() {
   };
 }
 // src/hooks/useAgnoTraces.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useAgnoTraces() {
   const client = useAgnoClient();
-  const [traces, setTraces] = import_react13.useState([]);
-  const [traceSessionStats, setTraceSessionStats] = import_react13.useState([]);
-  const [isLoading, setIsLoading] = import_react13.useState(false);
-  const [error, setError] = import_react13.useState();
-  import_react13.useEffect(() => {
+  const [traces, setTraces] = import_react14.useState([]);
+  const [traceSessionStats, setTraceSessionStats] = import_react14.useState([]);
+  const [isLoading, setIsLoading] = import_react14.useState(false);
+  const [error, setError] = import_react14.useState();
+  import_react14.useEffect(() => {
     const handleStateChange = () => {
       const state2 = client.getState();
       setTraces(state2.traces);
@@ -1659,7 +1705,7 @@ function useAgnoTraces() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchTraces = import_react13.useCallback(async (options = {}, requestOptions) => {
+  const fetchTraces = import_react14.useCallback(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1674,7 +1720,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const getTraceDetail = import_react13.useCallback(async (traceId, options = {}, requestOptions) => {
+  const getTraceDetail = import_react14.useCallback(async (traceId, options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1687,7 +1733,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchTraceSessionStats = import_react13.useCallback(async (options = {}, requestOptions) => {
+  const fetchTraceSessionStats = import_react14.useCallback(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1712,5 +1758,213 @@ function useAgnoTraces() {
     error
   };
 }
+// src/hooks/useAgnoComponents.ts
+var import_react15 = require("react");
+function useAgnoComponents() {
+  const client = useAgnoClient();
+  const [components, setComponents] = import_react15.useState([]);
+  const [isLoading, setIsLoading] = import_react15.useState(false);
+  const [error, setError] = import_react15.useState();
+  import_react15.useEffect(() => {
+    const handleComponentCreated = (component) => {
+      setComponents((prev) => [component, ...prev]);
+    };
+    const handleComponentUpdated = (component) => {
+      setComponents((prev) => prev.map((c) => c.component_id === component.component_id ? component : c));
+    };
+    const handleComponentDeleted = ({ componentId }) => {
+      setComponents((prev) => prev.filter((c) => c.component_id !== componentId));
+    };
+    const handleStateChange = () => {
+      setComponents(client.getState().components);
+    };
+    client.on("component:created", handleComponentCreated);
+    client.on("component:updated", handleComponentUpdated);
+    client.on("component:deleted", handleComponentDeleted);
+    client.on("state:change", handleStateChange);
+    setComponents(client.getState().components);
+    return () => {
+      client.off("component:created", handleComponentCreated);
+      client.off("component:updated", handleComponentUpdated);
+      client.off("component:deleted", handleComponentDeleted);
+      client.off("state:change", handleStateChange);
+    };
+  }, [client]);
+  const fetchComponents = import_react15.useCallback(async (queryParams, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      const response = await client.fetchComponents(queryParams, options);
+      setComponents(response.data);
+      return response;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const getComponentById = import_react15.useCallback(async (componentId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.getComponentById(componentId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const createComponent = import_react15.useCallback(async (request, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.createComponent(request, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const updateComponent = import_react15.useCallback(async (componentId, request, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.updateComponent(componentId, request, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const deleteComponent = import_react15.useCallback(async (componentId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      await client.deleteComponent(componentId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const fetchComponentConfigs = import_react15.useCallback(async (componentId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.fetchComponentConfigs(componentId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const createComponentConfig = import_react15.useCallback(async (componentId, request, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.createComponentConfig(componentId, request, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const getCurrentComponentConfig = import_react15.useCallback(async (componentId, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.getCurrentComponentConfig(componentId, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const getComponentConfigByVersion = import_react15.useCallback(async (componentId, version, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.getComponentConfigByVersion(componentId, version, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const updateComponentConfig = import_react15.useCallback(async (componentId, version, request, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.updateComponentConfig(componentId, version, request, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const deleteComponentConfig = import_react15.useCallback(async (componentId, version, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      await client.deleteComponentConfig(componentId, version, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const setCurrentComponentConfig = import_react15.useCallback(async (componentId, version, options) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      return await client.setCurrentComponentConfig(componentId, version, options);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  return {
+    components,
+    isLoading,
+    error,
+    fetchComponents,
+    getComponentById,
+    createComponent,
+    updateComponent,
+    deleteComponent,
+    fetchComponentConfigs,
+    createComponentConfig,
+    getCurrentComponentConfig,
+    getComponentConfigByVersion,
+    updateComponentConfig,
+    deleteComponentConfig,
+    setCurrentComponentConfig
+  };
+}
 
-//# debugId=EDC9872997598D6964756E2164756E21
+//# debugId=D27FED2F9BD03ABF64756E2164756E21