@rodrigocoliveira/agno-react 1.2.0 → 1.3.0

package/dist/hooks/useAgnoComponents.d.ts

@@ -0,0 +1,54 @@
+import type { ComponentResponse, ComponentCreate, ComponentUpdate, ComponentConfigResponse, ConfigCreate, ConfigUpdate, ComponentsListResponse, ListComponentsParams } from '@rodrigocoliveira/agno-types';
+/**
+ * Hook for AgentOS Studio components (DB-stored agents/teams/workflows).
+ *
+ * Covers both component CRUD and config versioning. Components live in the
+ * AgentOS database and represent agents/teams/workflows that can be created,
+ * edited, and published without code changes.
+ *
+ * Note: the Agno `/components` endpoint has no native filter by `user_id`.
+ * For per-user scoping, either store `user_id` in `metadata` and filter
+ * client-side, or extend your backend and pass `params: { user_id }` through.
+ */
+export declare function useAgnoComponents(): {
+    components: ComponentResponse[];
+    isLoading: boolean;
+    error: string | undefined;
+    fetchComponents: (queryParams?: ListComponentsParams, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentsListResponse>;
+    getComponentById: (componentId: string, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentResponse>;
+    createComponent: (request: ComponentCreate, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentResponse>;
+    updateComponent: (componentId: string, request: ComponentUpdate, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentResponse>;
+    deleteComponent: (componentId: string, options?: {
+        params?: Record<string, string>;
+    }) => Promise<void>;
+    fetchComponentConfigs: (componentId: string, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentConfigResponse[]>;
+    createComponentConfig: (componentId: string, request: ConfigCreate, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentConfigResponse>;
+    getCurrentComponentConfig: (componentId: string, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentConfigResponse>;
+    getComponentConfigByVersion: (componentId: string, version: number, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentConfigResponse>;
+    updateComponentConfig: (componentId: string, version: number, request: ConfigUpdate, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentConfigResponse>;
+    deleteComponentConfig: (componentId: string, version: number, options?: {
+        params?: Record<string, string>;
+    }) => Promise<void>;
+    setCurrentComponentConfig: (componentId: string, version: number, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ComponentConfigResponse>;
+};
+//# sourceMappingURL=useAgnoComponents.d.ts.map

package/dist/hooks/useAgnoComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgnoComponents.d.ts","sourceRoot":"","sources":["../../src/hooks/useAgnoComponents.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,uBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,8BAA8B,CAAC;AAGtC;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB;;;;oCA0Cb,oBAAoB,YACxB;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,sBAAsB,CAAC;oCAoBnB,MAAM,YACT;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,iBAAiB,CAAC;+BAkBlB,eAAe,YACd;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,iBAAiB,CAAC;mCAkBd,MAAM,WACV,eAAe,YACd;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,iBAAiB,CAAC;mCAkBd,MAAM,YACT;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,IAAI,CAAC;yCAkBD,MAAM,YACT;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,uBAAuB,EAAE,CAAC;yCAkBtB,MAAM,WACV,YAAY,YACX;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,uBAAuB,CAAC;6CAkBpB,MAAM,YACT;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,uBAAuB,CAAC;+CAkBpB,MAAM,WACV,MAAM,YACL;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,uBAAuB,CAAC;yCAkBpB,MAAM,WACV,MAAM,WACN,YAAY,YACX;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,uBAAuB,CAAC;yCAkBpB,MAAM,WACV,MAAM,YACL;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,IAAI,CAAC;6CAkBD,MAAM,WACV,MAAM,YACL;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,KAC5C,OAAO,CAAC,uBAAuB,CAAC;EAiCtC"}

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { useAgnoKnowledge } from './hooks/useAgnoKnowledge';
 export { useAgnoMetrics } from './hooks/useAgnoMetrics';
 export { useAgnoEvals } from './hooks/useAgnoEvals';
 export { useAgnoTraces } from './hooks/useAgnoTraces';
+export { useAgnoComponents } from './hooks/useAgnoComponents';
 export type { PaginatedTracesResult, PaginatedTraceSessionStatsResult, } from './hooks/useAgnoTraces';
-export type { AgnoClientConfig, ChatMessage, ToolCall, SessionEntry, AgentDetails, TeamDetails, ClientState, RunEvent, UIComponentSpec, ChartComponentSpec, CardGridComponentSpec, TableComponentSpec, MarkdownComponentSpec, CustomComponentSpec, ArtifactComponentSpec, ToolHandlerResult, GenerativeUIData, ChartSeries, CardData, TableColumn, CustomEventData, UserMemory, MemoriesListResponse, ListMemoriesParams, CreateMemoryRequest, UpdateMemoryRequest, DeleteMultipleMemoriesRequest, UserMemoryStats, UserMemoryStatsResponse, UserMemoryStatsParams, ContentStatus, ReaderSchema, ChunkerSchema, VectorDbSchema, KnowledgeConfigResponse, ContentResponse, ContentStatusResponse, ContentListResponse, ContentListOptions, VectorSearchRequest, VectorSearchResult, VectorSearchResponse, ContentUploadRequest, ContentUpdateRequest, TokenMetrics, ModelMetrics, DayAggregatedMetrics, MetricsResponse, MetricsOptions, RefreshMetricsOptions, EvalType, EvalComponentType, ScoringStrategy, SortOrder, EvalSchema, ListEvalRunsParams, EvalRunsListResponse, ExecuteEvalRequest, UpdateEvalRunRequest, DeleteEvalRunsRequest, TraceStatus, TraceSummary, TraceNode, TraceDetail, TraceSessionStats, TracesListResponse, TraceSessionStatsResponse, ListTracesOptions, GetTraceOptions, GetTraceSessionStatsOptions, PaginationInfo, } from '@rodrigocoliveira/agno-types';
+export type { AgnoClientConfig, ChatMessage, ToolCall, SessionEntry, AgentDetails, TeamDetails, ClientState, RunEvent, UIComponentSpec, ChartComponentSpec, CardGridComponentSpec, TableComponentSpec, MarkdownComponentSpec, CustomComponentSpec, ArtifactComponentSpec, ToolHandlerResult, GenerativeUIData, ChartSeries, CardData, TableColumn, CustomEventData, UserMemory, MemoriesListResponse, ListMemoriesParams, CreateMemoryRequest, UpdateMemoryRequest, DeleteMultipleMemoriesRequest, UserMemoryStats, UserMemoryStatsResponse, UserMemoryStatsParams, ContentStatus, ReaderSchema, ChunkerSchema, VectorDbSchema, KnowledgeConfigResponse, ContentResponse, ContentStatusResponse, ContentListResponse, ContentListOptions, VectorSearchRequest, VectorSearchResult, VectorSearchResponse, ContentUploadRequest, ContentUpdateRequest, TokenMetrics, ModelMetrics, DayAggregatedMetrics, MetricsResponse, MetricsOptions, RefreshMetricsOptions, EvalType, EvalComponentType, ScoringStrategy, SortOrder, EvalSchema, ListEvalRunsParams, EvalRunsListResponse, ExecuteEvalRequest, UpdateEvalRunRequest, DeleteEvalRunsRequest, TraceStatus, TraceSummary, TraceNode, TraceDetail, TraceSessionStats, TracesListResponse, TraceSessionStatsResponse, ListTracesOptions, GetTraceOptions, GetTraceSessionStatsOptions, PaginationInfo, ComponentType, ListComponentsParams, ComponentCreate, ComponentUpdate, ComponentResponse, ConfigCreate, ConfigUpdate, ComponentConfigResponse, ComponentsListResponse, } from '@rodrigocoliveira/agno-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -52,6 +52,7 @@ __export(exports_src, {
   useAgnoKnowledge: () => useAgnoKnowledge,
   useAgnoEvals: () => useAgnoEvals,
   useAgnoCustomEvents: () => useAgnoCustomEvents,
+  useAgnoComponents: () => useAgnoComponents,
   useAgnoClient: () => useAgnoClient,
   useAgnoChat: () => useAgnoChat,
   useAgnoActions: () => useAgnoActions,
@@ -85,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), []);
@@ -97,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);
@@ -111,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);
@@ -129,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);
@@ -418,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) {
@@ -434,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;
   }
@@ -462,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) {
@@ -1757,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=1F5634926049BF8564756E2164756E21
+//# debugId=D27FED2F9BD03ABF64756E2164756E21