@antipopp/agno-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,384 @@
+// src/context/AgnoContext.tsx
+import { createContext, useContext, useMemo, useEffect } from "react";
+import { AgnoClient } from "@antipopp/agno-client";
+import { jsx } from "react/jsx-runtime";
+var AgnoContext = createContext(null);
+function AgnoProvider({ config, children }) {
+  const client = useMemo(() => new AgnoClient(config), []);
+  useEffect(() => {
+    return () => {
+      client.removeAllListeners();
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsx(AgnoContext.Provider, { value: client, children });
+}
+function useAgnoClient() {
+  const client = useContext(AgnoContext);
+  if (!client) {
+    throw new Error("useAgnoClient must be used within an AgnoProvider");
+  }
+  return client;
+}
+
+// src/hooks/useAgnoChat.ts
+import { useState, useEffect as useEffect2, useCallback } from "react";
+function useAgnoChat() {
+  const client = useAgnoClient();
+  const [messages, setMessages] = useState(client.getMessages());
+  const [state, setState] = useState(client.getState());
+  const [error, setError] = useState();
+  useEffect2(() => {
+    const handleMessageUpdate = (updatedMessages) => {
+      console.log("[useAgnoChat] message:update event received, messages:", updatedMessages.length);
+      setMessages(updatedMessages);
+    };
+    const handleMessageComplete = (updatedMessages) => {
+      console.log("[useAgnoChat] message:complete event received, messages:", updatedMessages.length);
+      setMessages(updatedMessages);
+    };
+    const handleMessageError = (errorMessage) => {
+      console.log("[useAgnoChat] message:error event received:", errorMessage);
+      setError(errorMessage);
+    };
+    const handleStateChange = (newState) => {
+      console.log("[useAgnoChat] state:change event received");
+      setState(newState);
+    };
+    client.on("message:update", handleMessageUpdate);
+    client.on("message:complete", handleMessageComplete);
+    client.on("message:error", handleMessageError);
+    client.on("state:change", handleStateChange);
+    console.log("[useAgnoChat] Initializing with messages:", client.getMessages().length);
+    setMessages(client.getMessages());
+    setState(client.getState());
+    return () => {
+      client.off("message:update", handleMessageUpdate);
+      client.off("message:complete", handleMessageComplete);
+      client.off("message:error", handleMessageError);
+      client.off("state:change", handleStateChange);
+    };
+  }, [client]);
+  const sendMessage = useCallback(
+    async (message, options) => {
+      setError(void 0);
+      try {
+        await client.sendMessage(message, options);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      }
+    },
+    [client]
+  );
+  const clearMessages = useCallback(() => {
+    client.clearMessages();
+    setMessages([]);
+    setError(void 0);
+  }, [client]);
+  return {
+    messages,
+    sendMessage,
+    clearMessages,
+    isStreaming: state.isStreaming,
+    isPaused: state.isPaused,
+    error,
+    state
+  };
+}
+
+// src/hooks/useAgnoSession.ts
+import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+function useAgnoSession() {
+  const client = useAgnoClient();
+  const [sessions, setSessions] = useState2([]);
+  const [currentSessionId, setCurrentSessionId] = useState2(
+    client.getConfig().sessionId
+  );
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2();
+  useEffect3(() => {
+    const handleSessionLoaded = (sessionId) => {
+      setCurrentSessionId(sessionId);
+    };
+    const handleSessionCreated = (session) => {
+      setSessions((prev) => [session, ...prev]);
+      setCurrentSessionId(session.session_id);
+    };
+    const handleStateChange = () => {
+      const config = client.getConfig();
+      setCurrentSessionId(config.sessionId);
+      setSessions(client.getState().sessions);
+    };
+    client.on("session:loaded", handleSessionLoaded);
+    client.on("session:created", handleSessionCreated);
+    client.on("state:change", handleStateChange);
+    setSessions(client.getState().sessions);
+    setCurrentSessionId(client.getConfig().sessionId);
+    return () => {
+      client.off("session:loaded", handleSessionLoaded);
+      client.off("session:created", handleSessionCreated);
+      client.off("state:change", handleStateChange);
+    };
+  }, [client]);
+  const loadSession = useCallback2(
+    async (sessionId) => {
+      setIsLoading(true);
+      setError(void 0);
+      try {
+        const messages = await client.loadSession(sessionId);
+        setCurrentSessionId(sessionId);
+        return messages;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client]
+  );
+  const fetchSessions = useCallback2(async () => {
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const fetchedSessions = await client.fetchSessions();
+      setSessions(fetchedSessions);
+      return fetchedSessions;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  return {
+    sessions,
+    currentSessionId,
+    loadSession,
+    fetchSessions,
+    isLoading,
+    error
+  };
+}
+
+// src/hooks/useAgnoActions.ts
+import { useState as useState3, useCallback as useCallback3 } from "react";
+function useAgnoActions() {
+  const client = useAgnoClient();
+  const [isInitializing, setIsInitializing] = useState3(false);
+  const [error, setError] = useState3();
+  const initialize = useCallback3(async () => {
+    setIsInitializing(true);
+    setError(void 0);
+    try {
+      const result = await client.initialize();
+      return result;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsInitializing(false);
+    }
+  }, [client]);
+  const checkStatus = useCallback3(async () => {
+    setError(void 0);
+    try {
+      return await client.checkStatus();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      return false;
+    }
+  }, [client]);
+  const fetchAgents = useCallback3(async () => {
+    setError(void 0);
+    try {
+      return await client.fetchAgents();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    }
+  }, [client]);
+  const fetchTeams = useCallback3(async () => {
+    setError(void 0);
+    try {
+      return await client.fetchTeams();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(errorMessage);
+      throw err;
+    }
+  }, [client]);
+  const updateConfig = useCallback3(
+    (updates) => {
+      client.updateConfig(updates);
+    },
+    [client]
+  );
+  return {
+    initialize,
+    checkStatus,
+    fetchAgents,
+    fetchTeams,
+    updateConfig,
+    isInitializing,
+    error
+  };
+}
+
+// src/hooks/useAgnoToolExecution.ts
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+function useAgnoToolExecution(handlers, autoExecute = true) {
+  const client = useAgnoClient();
+  const [pendingTools, setPendingTools] = useState4([]);
+  const [isPaused, setIsPaused] = useState4(false);
+  const [isExecuting, setIsExecuting] = useState4(false);
+  const [executionError, setExecutionError] = useState4();
+  useEffect4(() => {
+    const handleRunPaused = (event) => {
+      console.log("[useAgnoToolExecution] Run paused, tools:", event.tools);
+      setIsPaused(true);
+      setPendingTools(event.tools);
+      setExecutionError(void 0);
+    };
+    const handleRunContinued = () => {
+      console.log("[useAgnoToolExecution] Run continued");
+      setIsPaused(false);
+      setPendingTools([]);
+      setIsExecuting(false);
+      setExecutionError(void 0);
+    };
+    client.on("run:paused", handleRunPaused);
+    client.on("run:continued", handleRunContinued);
+    return () => {
+      client.off("run:paused", handleRunPaused);
+      client.off("run:continued", handleRunContinued);
+    };
+  }, [client]);
+  const executeAndContinue = useCallback4(async () => {
+    if (!isPaused || pendingTools.length === 0) {
+      console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
+      return;
+    }
+    setIsExecuting(true);
+    setExecutionError(void 0);
+    try {
+      console.log("[useAgnoToolExecution] Executing", pendingTools.length, "tools");
+      const updatedTools = await Promise.all(
+        pendingTools.map(async (tool) => {
+          const handler = handlers[tool.tool_name];
+          if (!handler) {
+            console.warn(`[useAgnoToolExecution] No handler for tool: ${tool.tool_name}`);
+            return {
+              ...tool,
+              result: JSON.stringify({
+                error: `No handler registered for ${tool.tool_name}`
+              })
+            };
+          }
+          try {
+            console.log(`[useAgnoToolExecution] Executing tool: ${tool.tool_name}`, tool.tool_args);
+            const result = await handler(tool.tool_args);
+            console.log(`[useAgnoToolExecution] Tool result:`, result);
+            return {
+              ...tool,
+              result: typeof result === "string" ? result : JSON.stringify(result)
+            };
+          } catch (error) {
+            console.error(`[useAgnoToolExecution] Tool execution error:`, error);
+            return {
+              ...tool,
+              result: JSON.stringify({
+                error: error instanceof Error ? error.message : String(error)
+              })
+            };
+          }
+        })
+      );
+      console.log("[useAgnoToolExecution] Continuing run with results");
+      await client.continueRun(updatedTools);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      console.error("[useAgnoToolExecution] Failed to continue run:", errorMessage);
+      setExecutionError(errorMessage);
+      setIsExecuting(false);
+      throw error;
+    }
+  }, [client, handlers, isPaused, pendingTools]);
+  const executeTools = useCallback4(
+    async (tools) => {
+      return Promise.all(
+        tools.map(async (tool) => {
+          const handler = handlers[tool.tool_name];
+          if (!handler)
+            return tool;
+          try {
+            const result = await handler(tool.tool_args);
+            return {
+              ...tool,
+              result: typeof result === "string" ? result : JSON.stringify(result)
+            };
+          } catch (error) {
+            return {
+              ...tool,
+              result: JSON.stringify({
+                error: error instanceof Error ? error.message : String(error)
+              })
+            };
+          }
+        })
+      );
+    },
+    [handlers]
+  );
+  const continueWithResults = useCallback4(
+    async (tools) => {
+      if (!isPaused) {
+        throw new Error("No paused run to continue");
+      }
+      setIsExecuting(true);
+      try {
+        await client.continueRun(tools);
+      } catch (error) {
+        setIsExecuting(false);
+        throw error;
+      }
+    },
+    [client, isPaused]
+  );
+  useEffect4(() => {
+    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
+      console.log("[useAgnoToolExecution] Auto-executing tools");
+      executeAndContinue();
+    }
+  }, [autoExecute, isPaused, isExecuting, pendingTools.length, executeAndContinue]);
+  return {
+    /** Whether the run is currently paused awaiting tool execution */
+    isPaused,
+    /** Whether tools are currently being executed */
+    isExecuting,
+    /** Tools awaiting execution */
+    pendingTools,
+    /** Execute all pending tools and continue the run */
+    executeAndContinue,
+    /** Execute specific tools and return results without continuing */
+    executeTools,
+    /** Continue the run with manually provided tool results */
+    continueWithResults,
+    /** Error from tool execution, if any */
+    executionError
+  };
+}
+export {
+  AgnoProvider,
+  useAgnoActions,
+  useAgnoChat,
+  useAgnoClient,
+  useAgnoSession,
+  useAgnoToolExecution
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@antipopp/agno-react",
+  "version": "0.1.0",
+  "description": "React hooks for Agno client with frontend tool execution (HITL) support",
+  "author": "antipopp",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antipopp/agno-client.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "agno",
+    "agent",
+    "ai",
+    "react",
+    "hooks",
+    "hitl",
+    "tool-execution",
+    "streaming"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@antipopp/agno-client": "0.1.0",
+    "@antipopp/agno-types": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}