@rodrigocoliveira/agno-react 1.2.0 → 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) {
@@ -1673,6 +1673,214 @@ 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,
@@ -1684,6 +1892,7 @@ export {
   useAgnoKnowledge,
   useAgnoEvals,
   useAgnoCustomEvents,
+  useAgnoComponents,
   useAgnoClient,
   useAgnoChat,
   useAgnoActions,
@@ -1713,4 +1922,4 @@ export {
   AgnoProvider
 };
 
-//# debugId=FC02FFA7A567A9E164756E2164756E21
+//# debugId=001BF048D0CD48E164756E2164756E21