use-update-tools.ts

Overview

The use-update-tools.ts file provides a set of React hooks designed to manage the "tools" associated with an "agent node" in a React application. These hooks facilitate reading, updating, and deleting the tools configured on a specific agent node within a graph-based UI context.

Specifically, this file enables:

• Retrieving the current list of tools attached to the active agent node.

• Updating the tools list by adding or replacing tools with appropriate initialization.

• Deleting individual tools from the agent node.

The hooks leverage React Context (AgentFormContext) to access the current node, a Zustand store (useGraphStore) for state updates, and utility hooks for initializing tool data. This modular approach encapsulates logic related to agent tools, improving code reuse and maintainability.

Detailed Descriptions

Imports and Dependencies

• IAgentForm: Interface for agent form data structures, particularly the tools property.

• Operator: Enum or type representing operator/tool names.

• AgentFormContext: React context providing the current agent node data.

• useAgentToolInitialValues: Hook to get initialized default values for tools.

• useGraphStore: Zustand store hook for manipulating the graph state, particularly node forms.

• lodash.get: Safe object property accessor.

• React hooks: useContext, useMemo, useCallback.

1. useGetNodeTools()

Purpose

Retrieve the current list of tools from the active agent node's form data.

Function Signature

function useGetNodeTools(): IAgentForm['tools'] | undefined

Parameters

• None (internally uses React context)

Returns

• The tools array (IAgentForm['tools']), or undefined if no tools found.

Description

• Uses AgentFormContext to get the current node.

• Uses lodash.get to safely access node.data.form.tools.

• Wraps the retrieval inside useMemo for performance optimization, recalculating only when the node changes.

Usage Example

const tools = useGetNodeTools();
console.log(tools); // Outputs the current tools array or undefined

2. useUpdateAgentNodeTools()

Purpose

Provides a function to update the tools attached to the current agent node, supporting addition or replacement of tools. If a tool is new, it initializes default parameters.

Function Signature

function useUpdateAgentNodeTools(): { updateNodeTools: (value: string[]) => void }

Parameters

• None (returns an updater function)

Returned Object

• updateNodeTools(value: string[]): A function that accepts an array of tool component names (strings) and updates the node's tools accordingly.

Description

• Retrieves updateNodeForm method from Zustand graph store for updating node data.

• Gets the current node from context.

• Uses useGetNodeTools to obtain the current tools.

• Uses useAgentToolInitialValues to initialize default tool parameters.

• Defines updateNodeTools as a useCallback function to ensure stable references.

• For each tool name in the input array:

  • Attempts to find the tool in existing tools.

  • If found, reuses the existing tool.

  • If not found, creates a new tool object with initialized parameters.

• Calls updateNodeForm with the updated tools array and specifies ['tools'] as the path to update.

Usage Example

const { updateNodeTools } = useUpdateAgentNodeTools();

updateNodeTools(['toolA', 'toolB']); // Updates the node's tools to include 'toolA' and 'toolB'

3. useDeleteAgentNodeTools()

Purpose

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

Function Signature

function useDeleteAgentNodeTools(): { deleteNodeTool: (value: string) => () => void }

Parameters

• None (returns a deletion function)

Returned Object

• deleteNodeTool(value: string): A higher-order function that returns a function. Calling the returned function deletes the specified tool from the current node.

Description

• Uses updateNodeForm from Zustand for updating node data.

• Retrieves current tools and the active node.

• Defines deleteNodeTool as a useCallback function dependent on node id, current tools, and update function.

• The returned function filters out the tool matching the provided component name.

• Calls updateNodeForm with the filtered tools array.

Usage Example

const { deleteNodeTool } = useDeleteAgentNodeTools();

const handleDelete = deleteNodeTool('toolA');
handleDelete(); // Deletes 'toolA' from the node tools

Important Implementation Details and Algorithms

• State Management Integration: All updates to node tools are dispatched through updateNodeForm from a Zustand store (useGraphStore), ensuring a centralized and reactive state management approach.

• Context Usage: The AgentFormContext provides the current agent node, avoiding prop drilling and enabling these hooks to be used anywhere within the node's component tree.

• Initialization of New Tools: When adding a new tool (not previously present), tool parameters are initialized via initializeAgentToolValues from useAgentToolInitialValues. This ensures new tools have valid default configurations.

• Immutability and Performance: useMemo and useCallback hooks optimize rendering performance by memoizing values and functions based on dependencies.

• Higher-order Deletion Function: The deletion hook returns a function factory ((value) => () => {}), allowing convenient binding in event handlers.

Interaction with Other Parts of the System

• AgentFormContext: Supplies the current node's context, which holds the agent data including tools.

• useGraphStore: A Zustand store interface managing the graph's nodes and their forms. This file uses it to dispatch updates to the node's tools.

• useAgentToolInitialValues: Provides default initialization logic for tool parameter values, ensuring new tools are correctly configured.

• UI Components (Not Shown): These hooks are likely used within React components that render and allow editing of agent nodes and their tools.

Visual Diagram: Flowchart of Main Functions and Their Relationships

flowchart TD
    A[AgentFormContext\n(Current Node)] --> B[useGetNodeTools]
    B --> C[Current Tools Array]

    A --> D[useUpdateAgentNodeTools]
    D -->|calls| B
    D --> E[useAgentToolInitialValues\n(initializeAgentToolValues)]
    D --> F[updateNodeForm\n(Zustand Store)]
    D --> G[updateNodeTools(value: string[])\n- Finds existing tools\n- Initializes missing tools\n- Updates node tools]

    A --> H[useDeleteAgentNodeTools]
    H -->|calls| B
    H --> F
    H --> I[deleteNodeTool(value: string)\n- Filters out tool\n- Updates node tools]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style F fill:#bbf,stroke:#333,stroke-width:2px

Summary

The use-update-tools.ts file encapsulates logic for managing the tools associated with an agent node in a React app, providing easy-to-use hooks for reading, updating, and deleting tools while integrating tightly with context and global state management. This modular approach enhances maintainability and scalability in managing agent tool configurations.