@rodrigocoliveira/agno-react 1.1.6 → 1.3.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/context/AgnoContext.tsx
 import { createContext, useContext, useMemo, useEffect } from "react";
 import { AgnoClient } from "@rodrigocoliveira/agno-client";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx } from "react/jsx-runtime";
 var AgnoContext = createContext(null);
 function AgnoProvider({ config, children }) {
   const client = useMemo(() => new AgnoClient(config), []);
@@ -13,10 +13,10 @@ function AgnoProvider({ config, children }) {
       client.removeAllListeners();
     };
   }, [client]);
-  return /* @__PURE__ */ jsxDEV(AgnoContext.Provider, {
+  return /* @__PURE__ */ jsx(AgnoContext.Provider, {
     value: client,
     children
-  }, undefined, false, undefined, this);
+  });
 }
 function useAgnoClient() {
   const client = useContext(AgnoContext);
@@ -27,7 +27,7 @@ function useAgnoClient() {
 }
 // src/context/ToolHandlerContext.tsx
 import { createContext as createContext2, useContext as useContext2, useState, useCallback } from "react";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ToolHandlerContext = createContext2(null);
 function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
   const [handlers, setHandlers] = useState(initialHandlers);
@@ -45,10 +45,10 @@ function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
     registerHandler,
     unregisterHandler
   };
-  return /* @__PURE__ */ jsxDEV2(ToolHandlerContext.Provider, {
+  return /* @__PURE__ */ jsx2(ToolHandlerContext.Provider, {
     value,
     children
-  }, undefined, false, undefined, this);
+  });
 }
 function useToolHandlers() {
   return useContext2(ToolHandlerContext);
@@ -334,7 +334,7 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true, options) {
 }
 
 // src/components/GenerativeUIRenderer.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 
 class UIErrorBoundary extends React3.Component {
   constructor(props) {
@@ -350,19 +350,19 @@ class UIErrorBoundary extends React3.Component {
   }
   render() {
     if (this.state.hasError) {
-      return this.props.fallback || /* @__PURE__ */ jsxDEV3("div", {
+      return this.props.fallback || /* @__PURE__ */ jsxs("div", {
         className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800",
         children: [
-          /* @__PURE__ */ jsxDEV3("p", {
+          /* @__PURE__ */ jsx3("p", {
             className: "font-semibold",
             children: "Failed to render UI component"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("p", {
+          }),
+          /* @__PURE__ */ jsx3("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;
   }
@@ -378,183 +378,183 @@ function GenerativeUIRenderer({
     if (customSpec.renderKey) {
       const renderFn = getCustomRender(customSpec.renderKey);
       if (renderFn) {
-        return /* @__PURE__ */ jsxDEV3(UIErrorBoundary, {
+        return /* @__PURE__ */ jsx3(UIErrorBoundary, {
           onError,
-          children: /* @__PURE__ */ jsxDEV3("div", {
+          children: /* @__PURE__ */ jsx3("div", {
             className,
             children: renderFn(customSpec.props || {})
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
+          })
+        });
       }
     }
-    return /* @__PURE__ */ jsxDEV3("div", {
+    return /* @__PURE__ */ jsxs("div", {
       className: `p-4 border border-yellow-300 rounded-md bg-yellow-50 text-yellow-800 ${className || ""}`,
       children: [
-        /* @__PURE__ */ jsxDEV3("p", {
+        /* @__PURE__ */ jsx3("p", {
           className: "font-semibold",
           children: "Custom component not available"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV3("p", {
+        }),
+        /* @__PURE__ */ jsx3("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__ */ jsxDEV3(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx3(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsxDEV3("div", {
+        children: /* @__PURE__ */ jsxs("div", {
           className,
           children: [
-            chartSpec.title && /* @__PURE__ */ jsxDEV3("h3", {
+            chartSpec.title && /* @__PURE__ */ jsx3("h3", {
               className: "font-semibold mb-2",
               children: chartSpec.title
-            }, undefined, false, undefined, this),
-            chartSpec.description && /* @__PURE__ */ jsxDEV3("p", {
+            }),
+            chartSpec.description && /* @__PURE__ */ jsx3("p", {
               className: "text-sm text-gray-600 mb-4",
               children: chartSpec.description
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3(ChartRenderer, {
+            }),
+            /* @__PURE__ */ jsx3(ChartRenderer, {
               ...chartSpec.props
-            }, undefined, false, undefined, this)
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this);
+        })
+      });
     }
-    return /* @__PURE__ */ jsxDEV3("div", {
+    return /* @__PURE__ */ jsxs("div", {
       className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
       children: [
-        /* @__PURE__ */ jsxDEV3("p", {
+        /* @__PURE__ */ jsx3("p", {
           className: "font-semibold mb-2",
           children: chartSpec.title || "Chart Data"
-        }, undefined, false, undefined, this),
-        chartSpec.description && /* @__PURE__ */ jsxDEV3("p", {
+        }),
+        chartSpec.description && /* @__PURE__ */ jsx3("p", {
           className: "text-sm text-gray-600 mb-2",
           children: chartSpec.description
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV3("pre", {
+        }),
+        /* @__PURE__ */ jsx3("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__ */ jsxDEV3(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx3(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsxDEV3("div", {
+        children: /* @__PURE__ */ jsxs("div", {
           className,
           children: [
-            cardGridSpec.title && /* @__PURE__ */ jsxDEV3("h3", {
+            cardGridSpec.title && /* @__PURE__ */ jsx3("h3", {
               className: "font-semibold mb-2",
               children: cardGridSpec.title
-            }, undefined, false, undefined, this),
-            cardGridSpec.description && /* @__PURE__ */ jsxDEV3("p", {
+            }),
+            cardGridSpec.description && /* @__PURE__ */ jsx3("p", {
               className: "text-sm text-gray-600 mb-4",
               children: cardGridSpec.description
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3(CardGridRenderer, {
+            }),
+            /* @__PURE__ */ jsx3(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__ */ jsxDEV3(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx3(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsxDEV3("div", {
+        children: /* @__PURE__ */ jsxs("div", {
           className,
           children: [
-            tableSpec.title && /* @__PURE__ */ jsxDEV3("h3", {
+            tableSpec.title && /* @__PURE__ */ jsx3("h3", {
               className: "font-semibold mb-2",
               children: tableSpec.title
-            }, undefined, false, undefined, this),
-            tableSpec.description && /* @__PURE__ */ jsxDEV3("p", {
+            }),
+            tableSpec.description && /* @__PURE__ */ jsx3("p", {
               className: "text-sm text-gray-600 mb-4",
               children: tableSpec.description
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3(TableRenderer, {
+            }),
+            /* @__PURE__ */ jsx3(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__ */ jsxDEV3(UIErrorBoundary, {
+      return /* @__PURE__ */ jsx3(UIErrorBoundary, {
         onError,
-        children: /* @__PURE__ */ jsxDEV3("div", {
+        children: /* @__PURE__ */ jsx3("div", {
           className,
-          children: /* @__PURE__ */ jsxDEV3(MarkdownRenderer, {
+          children: /* @__PURE__ */ jsx3(MarkdownRenderer, {
             ...markdownSpec.props
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this);
+          })
+        })
+      });
     }
-    return /* @__PURE__ */ jsxDEV3("div", {
+    return /* @__PURE__ */ jsx3("div", {
       className,
       children: markdownSpec.props.content
-    }, undefined, false, undefined, this);
+    });
   }
   if (spec.type === "artifact") {
     const artifactSpec = spec;
-    return /* @__PURE__ */ jsxDEV3(UIErrorBoundary, {
+    return /* @__PURE__ */ jsx3(UIErrorBoundary, {
       onError,
-      children: /* @__PURE__ */ jsxDEV3("div", {
+      children: /* @__PURE__ */ jsxs("div", {
         className: `p-4 border rounded-md ${className || ""}`,
         children: [
-          artifactSpec.title && /* @__PURE__ */ jsxDEV3("h3", {
+          artifactSpec.title && /* @__PURE__ */ jsx3("h3", {
             className: "font-semibold mb-4",
             children: artifactSpec.title
-          }, undefined, false, undefined, this),
-          artifactSpec.description && /* @__PURE__ */ jsxDEV3("p", {
+          }),
+          artifactSpec.description && /* @__PURE__ */ jsx3("p", {
             className: "text-sm text-gray-600 mb-4",
             children: artifactSpec.description
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
+          }),
+          /* @__PURE__ */ jsx3("div", {
             className: "space-y-4",
-            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsxDEV3(GenerativeUIRenderer, {
+            children: artifactSpec.props.content?.map((childSpec, index) => /* @__PURE__ */ jsx3(GenerativeUIRenderer, {
               spec: childSpec,
               onError
-            }, index, false, undefined, this))
-          }, undefined, false, undefined, this)
+            }, index))
+          })
         ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this);
+      })
+    });
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: `p-4 border border-gray-300 rounded-md ${className || ""}`,
     children: [
-      /* @__PURE__ */ jsxDEV3("p", {
+      /* @__PURE__ */ jsx3("p", {
         className: "font-semibold",
         children: "Unsupported UI component"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3("p", {
+      }),
+      /* @__PURE__ */ 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) {
@@ -1253,15 +1253,59 @@ function useAgnoMemory() {
     deleteMultipleMemories
   };
 }
+// src/hooks/useAgnoSessionState.ts
+import { useCallback as useCallback8, useEffect as useEffect7, useState as useState8 } from "react";
+function useAgnoSessionState() {
+  const client = useAgnoClient();
+  const [sessionState, setLocalSessionState] = useState8(() => client.getSessionState());
+  const [isRefreshing, setIsRefreshing] = useState8(() => client.getState().isSessionStateRefreshing ?? false);
+  useEffect7(() => {
+    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 = useCallback8(async (next) => {
+    const resolved = typeof next === "function" ? next(client.getSessionState()) : next;
+    await client.setSessionState(resolved);
+  }, [client]);
+  const mergeSessionState = useCallback8(async (partial) => {
+    const current = client.getSessionState() ?? {};
+    const merged = { ...current, ...partial };
+    await client.setSessionState(merged);
+  }, [client]);
+  const refreshSessionState = useCallback8(async () => {
+    const result = await client.refreshSessionState();
+    return result ?? null;
+  }, [client]);
+  return {
+    sessionState,
+    isRefreshing,
+    setSessionState,
+    mergeSessionState,
+    refreshSessionState
+  };
+}
 // src/hooks/useAgnoKnowledge.ts
-import { useState as useState8, useCallback as useCallback8 } from "react";
+import { useState as useState9, useCallback as useCallback9 } from "react";
 function useAgnoKnowledge() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = useState8(false);
-  const [error, setError] = useState8();
-  const [config, setConfig] = useState8();
-  const [content, setContent] = useState8([]);
-  const getConfig = useCallback8(async (options) => {
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9();
+  const [config, setConfig] = useState9();
+  const [content, setContent] = useState9([]);
+  const getConfig = useCallback9(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1276,7 +1320,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const listContent = useCallback8(async (listOptions, options) => {
+  const listContent = useCallback9(async (listOptions, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1291,7 +1335,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContent = useCallback8(async (contentId, options) => {
+  const getContent = useCallback9(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1304,7 +1348,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const getContentStatus = useCallback8(async (contentId, options) => {
+  const getContentStatus = useCallback9(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1317,7 +1361,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const search = useCallback8(async (request, options) => {
+  const search = useCallback9(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1330,7 +1374,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const uploadContent = useCallback8(async (data, options) => {
+  const uploadContent = useCallback9(async (data, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1345,7 +1389,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateContent = useCallback8(async (contentId, request, options) => {
+  const updateContent = useCallback9(async (contentId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1360,7 +1404,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteAllContent = useCallback8(async (options) => {
+  const deleteAllContent = useCallback9(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1374,7 +1418,7 @@ function useAgnoKnowledge() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteContent = useCallback8(async (contentId, options) => {
+  const deleteContent = useCallback9(async (contentId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1406,14 +1450,14 @@ function useAgnoKnowledge() {
   };
 }
 // src/hooks/useAgnoMetrics.ts
-import { useState as useState9, useCallback as useCallback9 } from "react";
+import { useState as useState10, useCallback as useCallback10 } from "react";
 function useAgnoMetrics() {
   const client = useAgnoClient();
-  const [isLoading, setIsLoading] = useState9(false);
-  const [isRefreshing, setIsRefreshing] = useState9(false);
-  const [error, setError] = useState9();
-  const [metrics, setMetrics] = useState9();
-  const fetchMetrics = useCallback9(async (options) => {
+  const [isLoading, setIsLoading] = useState10(false);
+  const [isRefreshing, setIsRefreshing] = useState10(false);
+  const [error, setError] = useState10();
+  const [metrics, setMetrics] = useState10();
+  const fetchMetrics = useCallback10(async (options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1428,7 +1472,7 @@ function useAgnoMetrics() {
       setIsLoading(false);
     }
   }, [client]);
-  const refreshMetrics = useCallback9(async (options) => {
+  const refreshMetrics = useCallback10(async (options) => {
     setIsRefreshing(true);
     setError(undefined);
     try {
@@ -1442,7 +1486,7 @@ function useAgnoMetrics() {
       setIsRefreshing(false);
     }
   }, [client]);
-  const clearMetrics = useCallback9(() => {
+  const clearMetrics = useCallback10(() => {
     setMetrics(undefined);
     setError(undefined);
   }, []);
@@ -1457,14 +1501,14 @@ function useAgnoMetrics() {
   };
 }
 // src/hooks/useAgnoEvals.ts
-import { useState as useState10, useCallback as useCallback10 } from "react";
+import { useState as useState11, useCallback as useCallback11 } from "react";
 function useAgnoEvals() {
   const client = useAgnoClient();
-  const [evalRuns, setEvalRuns] = useState10([]);
-  const [pagination, setPagination] = useState10();
-  const [isLoading, setIsLoading] = useState10(false);
-  const [error, setError] = useState10();
-  const listEvalRuns = useCallback10(async (listParams = {}, options) => {
+  const [evalRuns, setEvalRuns] = useState11([]);
+  const [pagination, setPagination] = useState11();
+  const [isLoading, setIsLoading] = useState11(false);
+  const [error, setError] = useState11();
+  const listEvalRuns = useCallback11(async (listParams = {}, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1480,7 +1524,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const getEvalRun = useCallback10(async (evalRunId, options) => {
+  const getEvalRun = useCallback11(async (evalRunId, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1493,7 +1537,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const executeEval = useCallback10(async (request, options) => {
+  const executeEval = useCallback11(async (request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1508,7 +1552,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const updateEvalRun = useCallback10(async (evalRunId, request, options) => {
+  const updateEvalRun = useCallback11(async (evalRunId, request, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1523,7 +1567,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const deleteEvalRuns = useCallback10(async (evalRunIds, options) => {
+  const deleteEvalRuns = useCallback11(async (evalRunIds, options) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1538,7 +1582,7 @@ function useAgnoEvals() {
       setIsLoading(false);
     }
   }, [client]);
-  const renameEvalRun = useCallback10(async (evalRunId, newName, options) => {
+  const renameEvalRun = useCallback11(async (evalRunId, newName, options) => {
     return updateEvalRun(evalRunId, { name: newName }, options);
   }, [updateEvalRun]);
   return {
@@ -1555,14 +1599,14 @@ function useAgnoEvals() {
   };
 }
 // src/hooks/useAgnoTraces.ts
-import { useState as useState11, useEffect as useEffect7, useCallback as useCallback11 } from "react";
+import { useState as useState12, useEffect as useEffect8, useCallback as useCallback12 } from "react";
 function useAgnoTraces() {
   const client = useAgnoClient();
-  const [traces, setTraces] = useState11([]);
-  const [traceSessionStats, setTraceSessionStats] = useState11([]);
-  const [isLoading, setIsLoading] = useState11(false);
-  const [error, setError] = useState11();
-  useEffect7(() => {
+  const [traces, setTraces] = useState12([]);
+  const [traceSessionStats, setTraceSessionStats] = useState12([]);
+  const [isLoading, setIsLoading] = useState12(false);
+  const [error, setError] = useState12();
+  useEffect8(() => {
     const handleStateChange = () => {
       const state2 = client.getState();
       setTraces(state2.traces);
@@ -1576,7 +1620,7 @@ function useAgnoTraces() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const fetchTraces = useCallback11(async (options = {}, requestOptions) => {
+  const fetchTraces = useCallback12(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1591,7 +1635,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const getTraceDetail = useCallback11(async (traceId, options = {}, requestOptions) => {
+  const getTraceDetail = useCallback12(async (traceId, options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1604,7 +1648,7 @@ function useAgnoTraces() {
       setIsLoading(false);
     }
   }, [client]);
-  const fetchTraceSessionStats = useCallback11(async (options = {}, requestOptions) => {
+  const fetchTraceSessionStats = useCallback12(async (options = {}, requestOptions) => {
     setIsLoading(true);
     setError(undefined);
     try {
@@ -1629,16 +1673,226 @@ function useAgnoTraces() {
     error
   };
 }
+// src/hooks/useAgnoComponents.ts
+import { useState as useState13, useEffect as useEffect9, useCallback as useCallback13 } from "react";
+function useAgnoComponents() {
+  const client = useAgnoClient();
+  const [components, setComponents] = useState13([]);
+  const [isLoading, setIsLoading] = useState13(false);
+  const [error, setError] = useState13();
+  useEffect9(() => {
+    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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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 = useCallback13(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
+  };
+}
 export {
   useToolHandlers,
   useAgnoTraces,
   useAgnoToolExecution,
+  useAgnoSessionState,
   useAgnoSession,
   useAgnoMetrics,
   useAgnoMemory,
   useAgnoKnowledge,
   useAgnoEvals,
   useAgnoCustomEvents,
+  useAgnoComponents,
   useAgnoClient,
   useAgnoChat,
   useAgnoActions,
@@ -1668,4 +1922,4 @@ export {
   AgnoProvider
 };
 
-//# debugId=124D08F7DF0A0ECE64756E2164756E21
+//# debugId=001BF048D0CD48E164756E2164756E21