@antipopp/agno-react 0.8.0 → 0.10.0

package/README.md

@@ -33,6 +33,12 @@ function App() {
         mode: 'agent',
         agentId: 'your-agent-id',
         userId: 'user-123', // Optional: Link sessions to a user
+        headers: {          // Optional: Global headers for all requests
+          'X-API-Version': 'v2'
+        },
+        params: {           // Optional: Global query params for all requests
+          locale: 'en-US'
+        }
       }}
     >
       <YourComponents />
@@ -134,6 +140,17 @@ await sendMessage(formData);
 await sendMessage('Hello!', {
   headers: { 'X-Custom': 'value' }
 });
+
+// Send with query parameters
+await sendMessage('Hello!', {
+  params: { temperature: '0.7', max_tokens: '500' }
+});
+
+// Send with both headers and params
+await sendMessage('Hello!', {
+  headers: { 'X-Request-ID': '12345' },
+  params: { debug: 'true' }
+});
 ```
 
 #### `clearMessages()`
@@ -164,14 +181,20 @@ function SessionList() {
   const { sessions, loadSession, fetchSessions } = useAgnoSession();
 
   useEffect(() => {
-    fetchSessions();
+    // Fetch sessions with optional query params
+    fetchSessions({ params: { limit: '50', status: 'active' } });
   }, [fetchSessions]);
 
+  const handleLoadSession = (sessionId: string) => {
+    // Load session with optional params
+    loadSession(sessionId, { params: { include_metadata: 'true' } });
+  };
+
   return (
     <ul>
       {sessions.map((session) => (
         <li key={session.session_id}>
-          <button onClick={() => loadSession(session.session_id)}>
+          <button onClick={() => handleLoadSession(session.session_id)}>
             {session.session_name}
           </button>
         </li>
@@ -201,13 +224,19 @@ const {
 
 ```tsx
 function InitComponent() {
-  const { initialize, updateConfig, isInitializing } = useAgnoActions();
+  const { initialize, fetchAgents, updateConfig, isInitializing } = useAgnoActions();
   const { state } = useAgnoChat();
 
   useEffect(() => {
-    initialize();
+    // Initialize with optional params
+    initialize({ params: { filter: 'active' } });
   }, [initialize]);
 
+  const loadMoreAgents = () => {
+    // Fetch agents with custom params
+    fetchAgents({ params: { page: '2', limit: '20' } });
+  };
+
   const switchAgent = (agentId: string) => {
     updateConfig({ agentId, mode: 'agent' });
   };
@@ -222,6 +251,7 @@ function InitComponent() {
           {agent.name}
         </button>
       ))}
+      <button onClick={loadMoreAgents}>Load More</button>
     </div>
   );
 }

package/dist/index.d.mts

@@ -1,16 +1,37 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-import { AgnoClient } from '@antipopp/agno-client';
 import * as _antipopp_agno_types from '@antipopp/agno-types';
-import { AgnoClientConfig, ToolCall, CustomRenderFunction, UIComponentSpec, ChartComponentSpec, CardData, CardGridComponentSpec, TableColumn, TableComponentSpec, MarkdownComponentSpec, ArtifactComponentSpec, ToolHandlerResult, ChatMessage, ClientState, SessionEntry, AgentDetails, TeamDetails } from '@antipopp/agno-types';
+import { UIComponentSpec, AgnoClientConfig, ToolCall, CustomRenderFunction, AgentDetails, TeamDetails, ChatMessage, ClientState, SessionEntry, ChartComponentSpec, ArtifactComponentSpec, CardData, CardGridComponentSpec, TableColumn, MarkdownComponentSpec, TableComponentSpec, ToolHandlerResult } from '@antipopp/agno-types';
 export { AgentDetails, AgnoClientConfig, ArtifactComponentSpec, CardData, CardGridComponentSpec, ChartComponentSpec, ChartSeries, ChatMessage, ClientState, CustomComponentSpec, GenerativeUIData, MarkdownComponentSpec, RunEvent, SessionEntry, TableColumn, TableComponentSpec, TeamDetails, ToolCall, ToolHandlerResult, UIComponentSpec } from '@antipopp/agno-types';
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AgnoClient } from '@antipopp/agno-client';
+
+/**
+ * Generative UI Renderer
+ *
+ * Renders UI components based on specifications from the agent.
+ * Supports both registry-based components and custom render functions.
+ */
+
+interface GenerativeUIRendererProps {
+    /** The UI component specification to render */
+    spec: UIComponentSpec;
+    /** Optional className for styling */
+    className?: string;
+    /** Error boundary fallback */
+    onError?: (error: Error) => void;
+}
+/**
+ * Main Generative UI Renderer component
+ */
+declare function GenerativeUIRenderer({ spec, className, onError, }: GenerativeUIRendererProps): React.ReactElement;
 
 interface AgnoProviderProps {
     config: AgnoClientConfig;
     children: React.ReactNode;
 }
 /**
- * Provider component that creates and manages an AgnoClient instance
+ * Provider component that creates and manages an AgnoClient instance.
+ * Handles cleanup of all module-level registries on unmount to prevent memory leaks.
  */
 declare function AgnoProvider({ config, children }: AgnoProviderProps): react_jsx_runtime.JSX.Element;
 /**
@@ -26,6 +47,11 @@ type ToolHandler = (args: Record<string, any>) => Promise<any>;
  * Get a custom render function by key
  */
 declare function getCustomRender(key: string): CustomRenderFunction | undefined;
+/**
+ * Clear all custom render functions from the registry.
+ * Call this during cleanup (e.g., when AgnoProvider unmounts) to prevent memory leaks.
+ */
+declare function clearCustomRenderRegistry(): void;
 /**
  * Tool execution event payload
  */
@@ -71,7 +97,10 @@ declare function useAgnoToolExecution(handlers?: Record<string, ToolHandler>, au
     /** Execute specific tools and return results without continuing */
     executeTools: (tools: ToolCall[]) => Promise<ToolCall[]>;
     /** Continue the run with manually provided tool results */
-    continueWithResults: (tools: ToolCall[]) => Promise<void>;
+    continueWithResults: (tools: ToolCall[], options?: {
+        headers?: Record<string, string>;
+        params?: Record<string, string>;
+    }) => Promise<void>;
     /** Error from tool execution, if any */
     executionError: string | undefined;
 };
@@ -105,7 +134,7 @@ interface ToolHandlerProviderProps {
  * </ToolHandlerProvider>
  * ```
  */
-declare function ToolHandlerProvider({ handlers: initialHandlers, children }: ToolHandlerProviderProps): react_jsx_runtime.JSX.Element;
+declare function ToolHandlerProvider({ handlers: initialHandlers, children, }: ToolHandlerProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access global tool handlers
  *
@@ -119,24 +148,65 @@ declare function ToolHandlerProvider({ handlers: initialHandlers, children }: To
 declare function useToolHandlers(): ToolHandlerContextValue | null;
 
 /**
- * Generative UI Renderer
- *
- * Renders UI components based on specifications from the agent.
- * Supports both registry-based components and custom render functions.
+ * Hook for common actions like initialization, fetching agents/teams
  */
+declare function useAgnoActions(): {
+    initialize: (options?: {
+        params?: Record<string, string>;
+    }) => Promise<{
+        agents: AgentDetails[];
+        teams: TeamDetails[];
+    }>;
+    checkStatus: (options?: {
+        params?: Record<string, string>;
+    }) => Promise<boolean>;
+    fetchAgents: (options?: {
+        params?: Record<string, string>;
+    }) => Promise<AgentDetails[]>;
+    fetchTeams: (options?: {
+        params?: Record<string, string>;
+    }) => Promise<TeamDetails[]>;
+    updateConfig: (updates: Partial<Parameters<(updates: Partial<_antipopp_agno_types.AgnoClientConfig>) => void>[0]>) => void;
+    isInitializing: boolean;
+    error: string | undefined;
+};
 
-interface GenerativeUIRendererProps {
-    /** The UI component specification to render */
-    spec: UIComponentSpec;
-    /** Optional className for styling */
-    className?: string;
-    /** Error boundary fallback */
-    onError?: (error: Error) => void;
-}
 /**
- * Main Generative UI Renderer component
+ * Main hook for chat interactions
+ * Provides messages, state, and methods to interact with the agent
  */
-declare function GenerativeUIRenderer({ spec, className, onError, }: GenerativeUIRendererProps): React.ReactElement;
+declare function useAgnoChat(): {
+    messages: ChatMessage[];
+    sendMessage: (message: string | FormData, options?: {
+        headers?: Record<string, string>;
+        params?: Record<string, string>;
+    }) => Promise<void>;
+    clearMessages: () => void;
+    cancelRun: () => Promise<void>;
+    isStreaming: boolean;
+    isRefreshing: boolean;
+    isPaused: boolean;
+    isCancelling: boolean;
+    currentRunId: string | undefined;
+    error: string | undefined;
+    state: ClientState;
+};
+
+/**
+ * Hook for session management
+ */
+declare function useAgnoSession(): {
+    sessions: SessionEntry[];
+    currentSessionId: string | undefined;
+    loadSession: (sessionId: string, options?: {
+        params?: Record<string, string>;
+    }) => Promise<ChatMessage[]>;
+    fetchSessions: (options?: {
+        params?: Record<string, string>;
+    }) => Promise<SessionEntry[]>;
+    isLoading: boolean;
+    error: string | undefined;
+};
 
 /**
  * Component Registry for Generative UI
@@ -153,7 +223,7 @@ type ComponentRenderer = (props: any) => any;
  */
 declare class ComponentRegistry {
     private static instance;
-    private components;
+    private readonly components;
     private constructor();
     /**
      * Get the singleton instance
@@ -187,6 +257,12 @@ declare class ComponentRegistry {
      * Clear all registered components
      */
     clear(): void;
+    /**
+     * Reset the singleton instance.
+     * Call this during cleanup (e.g., when AgnoProvider unmounts) to prevent memory leaks.
+     * After calling this, getInstance() will create a fresh instance.
+     */
+    static resetInstance(): void;
 }
 /**
  * Get the global component registry instance
@@ -217,7 +293,7 @@ interface ChartHelperOptions {
     /** Chart description */
     description?: string;
     /** Layout preference */
-    layout?: 'inline' | 'artifact';
+    layout?: "inline" | "artifact";
     /** Show legend */
     showLegend?: boolean;
     /** Show grid */
@@ -263,7 +339,7 @@ declare function createAreaChart(data: any[], xKey: string, areas: Array<{
 interface CardGridHelperOptions {
     title?: string;
     description?: string;
-    layout?: 'inline' | 'artifact';
+    layout?: "inline" | "artifact";
     columns?: {
         default?: number;
         sm?: number;
@@ -271,7 +347,7 @@ interface CardGridHelperOptions {
         lg?: number;
         xl?: number;
     };
-    variant?: 'default' | 'bordered' | 'elevated';
+    variant?: "default" | "bordered" | "elevated";
 }
 /**
  * Create a card grid specification
@@ -283,7 +359,7 @@ declare function createCardGrid(cards: CardData[], options?: CardGridHelperOptio
 declare function createCard(id: string, title: string, description?: string, options?: {
     image?: string;
     metadata?: Record<string, any>;
-    actions?: CardData['actions'];
+    actions?: CardData["actions"];
 }): CardData;
 /**
  * Table helper options
@@ -291,14 +367,14 @@ declare function createCard(id: string, title: string, description?: string, opt
 interface TableHelperOptions {
     title?: string;
     description?: string;
-    layout?: 'inline' | 'artifact';
+    layout?: "inline" | "artifact";
     sortable?: boolean;
     filterable?: boolean;
     pagination?: {
         pageSize?: number;
         pageSizeOptions?: number[];
     };
-    density?: 'comfortable' | 'compact';
+    density?: "comfortable" | "compact";
 }
 /**
  * Create a table specification
@@ -310,8 +386,8 @@ declare function createTable(data: Record<string, any>[], columns: TableColumn[]
 declare function createColumn(key: string, header: string, options?: {
     width?: number | string;
     sortable?: boolean;
-    cellType?: 'text' | 'number' | 'date' | 'badge' | 'link';
-    format?: TableColumn['format'];
+    cellType?: "text" | "number" | "date" | "badge" | "link";
+    format?: TableColumn["format"];
 }): TableColumn;
 /**
  * Create a markdown specification
@@ -319,7 +395,7 @@ declare function createColumn(key: string, header: string, options?: {
 declare function createMarkdown(content: string, options?: {
     title?: string;
     description?: string;
-    layout?: 'inline' | 'artifact';
+    layout?: "inline" | "artifact";
     syntaxHighlight?: boolean;
 }): MarkdownComponentSpec;
 /**
@@ -328,7 +404,7 @@ declare function createMarkdown(content: string, options?: {
 declare function createArtifact(content: UIComponentSpec[], options?: {
     title?: string;
     description?: string;
-    variant?: 'default' | 'bordered' | 'elevated';
+    variant?: "default" | "bordered" | "elevated";
 }): ArtifactComponentSpec;
 /**
  * Smart chart creator - automatically chooses the best chart type based on data
@@ -336,10 +412,10 @@ declare function createArtifact(content: UIComponentSpec[], options?: {
 declare function createSmartChart(data: any[], options?: {
     title?: string;
     description?: string;
-    layout?: 'inline' | 'artifact';
+    layout?: "inline" | "artifact";
     xKey?: string;
     yKeys?: string[];
-    preferredType?: 'bar' | 'line' | 'area' | 'pie';
+    preferredType?: "bar" | "line" | "area" | "pie";
 }): ChartComponentSpec;
 /**
  * Wrap data and UI into a ToolHandlerResult
@@ -366,49 +442,4 @@ declare function resultWithCardGrid(cards: CardData[], options?: CardGridHelperO
  */
 declare function resultWithTable(data: Record<string, any>[], columns: TableColumn[], options?: TableHelperOptions): ToolHandlerResult;
 
-/**
- * Main hook for chat interactions
- * Provides messages, state, and methods to interact with the agent
- */
-declare function useAgnoChat(): {
-    messages: ChatMessage[];
-    sendMessage: (message: string | FormData, options?: {
-        headers?: Record<string, string>;
-    }) => Promise<void>;
-    clearMessages: () => void;
-    isStreaming: boolean;
-    isRefreshing: boolean;
-    isPaused: boolean;
-    error: string | undefined;
-    state: ClientState;
-};
-
-/**
- * Hook for session management
- */
-declare function useAgnoSession(): {
-    sessions: SessionEntry[];
-    currentSessionId: string | undefined;
-    loadSession: (sessionId: string) => Promise<ChatMessage[]>;
-    fetchSessions: () => Promise<SessionEntry[]>;
-    isLoading: boolean;
-    error: string | undefined;
-};
-
-/**
- * Hook for common actions like initialization, fetching agents/teams
- */
-declare function useAgnoActions(): {
-    initialize: () => Promise<{
-        agents: AgentDetails[];
-        teams: TeamDetails[];
-    }>;
-    checkStatus: () => Promise<boolean>;
-    fetchAgents: () => Promise<AgentDetails[]>;
-    fetchTeams: () => Promise<TeamDetails[]>;
-    updateConfig: (updates: Partial<Parameters<(updates: Partial<_antipopp_agno_types.AgnoClientConfig>) => void>[0]>) => void;
-    isInitializing: boolean;
-    error: string | undefined;
-};
-
-export { AgnoProvider, type AgnoProviderProps, type CardGridHelperOptions, type ChartHelperOptions, ComponentRegistry, type ComponentRenderer, GenerativeUIRenderer, type GenerativeUIRendererProps, type TableHelperOptions, type ToolExecutionEvent, type ToolHandler, type ToolHandlerContextValue, ToolHandlerProvider, type ToolHandlerProviderProps, createAreaChart, createArtifact, createBarChart, createCard, createCardGrid, createColumn, createLineChart, createMarkdown, createPieChart, createSmartChart, createTable, createToolResult, getChartComponent, getComponentRegistry, getCustomRender, registerChartComponent, resultWithBarChart, resultWithCardGrid, resultWithSmartChart, resultWithTable, useAgnoActions, useAgnoChat, useAgnoClient, useAgnoSession, useAgnoToolExecution, useToolHandlers };
+export { AgnoProvider, type AgnoProviderProps, type CardGridHelperOptions, type ChartHelperOptions, ComponentRegistry, type ComponentRenderer, GenerativeUIRenderer, type GenerativeUIRendererProps, type TableHelperOptions, type ToolExecutionEvent, type ToolHandler, type ToolHandlerContextValue, ToolHandlerProvider, type ToolHandlerProviderProps, clearCustomRenderRegistry, createAreaChart, createArtifact, createBarChart, createCard, createCardGrid, createColumn, createLineChart, createMarkdown, createPieChart, createSmartChart, createTable, createToolResult, getChartComponent, getComponentRegistry, getCustomRender, registerChartComponent, resultWithBarChart, resultWithCardGrid, resultWithSmartChart, resultWithTable, useAgnoActions, useAgnoChat, useAgnoClient, useAgnoSession, useAgnoToolExecution, useToolHandlers };