use-update-tools.ts

Overview

use-update-tools.ts is a React utility module designed to manage the "tools" associated with an agent node within a graphical workflow or form-based system. It provides custom React hooks that facilitate reading, updating, and deleting tools tied to a particular agent node's form data. This file leverages React's Context API, state management through a global store (useGraphStore), and utility hooks to ensure consistent and efficient updates to the agent node's tools.

The primary focus is on manipulating the tools array property of an IAgentForm entity, which holds tool configurations attached to an agent node.

Detailed Explanation of Exports

1. useGetNodeTools

Purpose

Retrieves the current list of tools associated with the agent node from the context.

Implementation Details

• Uses React's useContext to access the current agent node context (AgentFormContext).

• Uses lodash.get to safely retrieve the nested tools array at path data.form.tools from the node object.

• Memoizes the result with useMemo to prevent unnecessary recalculations unless the node changes.

Returns

• tools: IAgentForm['tools'] — An array of tool objects configured for the agent node, or undefined if not set.

Usage Example

const tools = useGetNodeTools();
// tools now contains the current tools array for this node.

2. useUpdateAgentNodeTools

Purpose

Provides a function to update the tools array of the current agent node based on an array of tool component names.

Implementation Details

• Accesses the global graph store's updateNodeForm method to update node form data.

• Retrieves the current node context and existing tools via useGetNodeTools.

• Uses useAgentToolInitialValues hook to initialize default parameter values for new tools.

• Defines updateNodeTools function via useCallback. This function:

  • Takes an array of tool component names (string[]).

  • Maps over the names to either:

    • Retain existing tool data if a tool with the same component_name exists.

    • Or create a new tool object with default params initialized.

  • Calls updateNodeForm with the node id, the new tools array, and specifies the 'tools' path to update.

Parameters

• value: string[] — Array of tool component names to set for the node.

Returns

• { updateNodeTools } — An object exposing the updateNodeTools function.

Usage Example

const { updateNodeTools } = useUpdateAgentNodeTools();

updateNodeTools(['toolA', 'toolB']);
// Updates the node's tools to toolA and toolB, initializing new tools if necessary.

3. useDeleteAgentNodeTools

Purpose

Provides a function to remove a specific tool from the current agent node's tools array.

Implementation Details

• Accesses updateNodeForm from the global graph store.

• Retrieves current tools and node context.

• Defines deleteNodeTool function via useCallback which:

  • Accepts a single component name to delete.

  • Filters out the tool matching that name.

  • Calls updateNodeForm to update the node's tools.

Parameters

• value: string — The component name of the tool to be deleted.

Returns

• { deleteNodeTool } — An object exposing the deleteNodeTool function.

Usage Example

const { deleteNodeTool } = useDeleteAgentNodeTools();

const onDelete = deleteNodeTool('toolA');
onDelete();  // Removes 'toolA' from the node's tools.

Important Implementation Details & Algorithms

• Context Usage: The hooks rely heavily on AgentFormContext, indicating that these hooks must be used within a React component tree where this context is provided.

• State Management Integration: The useGraphStore hook suggests a global state store (likely Zustand or similar) that manages the nodes' form data and provides the updateNodeForm method to update node fields efficiently.

• Tool Initialization: When adding new tools (in useUpdateAgentNodeTools), the hook uses initializeAgentToolValues to set default parameters, ensuring that newly added tools have complete and valid initial states.

• Immutability: Updates create new arrays rather than mutating existing ones, preserving React's state immutability principles.

• Memoization & Callbacks: Usage of useMemo and useCallback optimizes performance by preventing unnecessary re-renders or recalculations.

Interaction with Other Parts of the System

• AgentFormContext: Provides the current agent node, including its form data and tools.

• useGraphStore: The global node state store that allows updating node form data. This is the central mechanism by which changes to tools are persisted.

• useAgentToolInitialValues: Supplies default parameter values for new tools, ensuring consistent initialization.

• Operator Constant: Used to typecast tool component names when initializing parameters, linking tools to operator configurations.

• IAgentForm Interface: Defines the structure of the form data including tools, ensuring type safety.

• Lodash get: Used for safe deep property access in the node data.

This file acts as a bridge between UI components that display or edit tools and the underlying data store representing agent nodes.

Mermaid Flowchart Diagram

flowchart TD
    A[AgentFormContext] --> B[useGetNodeTools]
    B -->|returns tools| C[useUpdateAgentNodeTools]
    B -->|returns tools| D[useDeleteAgentNodeTools]

    C -->|calls updateNodeForm| E[useGraphStore.updateNodeForm]
    D -->|calls updateNodeForm| E

    C -->|uses| F[useAgentToolInitialValues.initializeAgentToolValues]

    subgraph Hooks
        B
        C
        D
    end

Summary

use-update-tools.ts encapsulates tools management logic for agent nodes in a React-based graph or form system. By providing simple, reusable hooks to get, update, and delete tools, it abstracts complex state updates and context handling, promoting clean and maintainable code. The file integrates deeply with context, global store, and initialization utilities to ensure consistent state management of agent node tools.