use-change-node-name.ts

Overview

The use-change-node-name.ts file provides React hooks focused on managing and validating node names within a graph-based UI application. It primarily addresses two scenarios:

• Changing the name of general graph nodes.

• Handling the specific case of renaming "tool" nodes, which are special nodes containing multiple tools.

These hooks ensure that node names are unique within their respective contexts and sync updates properly with the global graph state managed through a store (useGraphStore). They also provide user feedback when invalid or duplicate names are entered.

Detailed Explanation

Imports and Dependencies

• React Hooks: useState, useEffect, useCallback, useMemo for managing state and memoization.

• lodash trim: Trims whitespace from strings.

• message UI component: Displays error messages to users.

• Constants: Operator enum for identifying node types.

• useGraphStore: Custom hook to interact with the global graph state.

• Utility function: getAgentNodeTools extracts tool information from a node.

Exported Hooks

1. useHandleTooNodeNameChange

Handles name changes specifically for a "tool" node's individual tool.

Signature

useHandleTooNodeNameChange(params: {
  id?: string;
  name?: string;
  setName: Dispatch<SetStateAction<string>>;
}): {
  handleToolNameBlur: () => void;
  previousToolName: string | undefined;
}

Parameters

• id (optional): The unique identifier of the node containing the tool.

• name (optional): The current input value for the tool's name.

• setName: Setter function to update the tool name state.

Returns

• handleToolNameBlur: A function to be called when the tool name input loses focus (blur event). It validates and updates the tool name.

• previousToolName: The tool's original name before editing.

Functionality

• Finds the agent (parent) node by id using the global store.

• Retrieves the list of tools within the agent node.

• Memoizes the previous name of the tool currently being edited.

• On blur:

  • Trims the new name.

  • Checks if the name is empty or duplicates another tool's name.

  • Displays an error message if invalid.

  • Reverts to the previous name if invalid.

  • If valid, updates the tool's name in the global graph store (updateNodeForm).

Usage Example

const { handleToolNameBlur, previousToolName } = useHandleTooNodeNameChange({
  id: 'node123',
  name: currentName,
  setName: setCurrentName,
});

// Usage in input:
// <input value={currentName} onBlur={handleToolNameBlur} onChange={...} />

2. useHandleNodeNameChange

Handles name changes for general nodes or delegates to the tool-specific handler if the node is a tool node.

Signature

useHandleNodeNameChange(params: {
  id?: string;
  data: any;
}): {
  name: string;
  handleNameBlur: () => void;
  handleNameChange: (e: ChangeEvent<any>) => void;
}

Parameters

• id (optional): The unique identifier of the node.

• data: The node's data object, expected to contain the current name.

Returns

• name: The current name state of the node.

• handleNameBlur: Function to call when the name input loses focus.

• handleNameChange: Function to call on input change events to update the name state.

Functionality

• Initializes name state from node data.

• Checks if the node is a tool node via global store (getOperatorTypeFromId and Operator.Tool).

• Uses useHandleTooNodeNameChange internally if the node is a tool node.

• General node name blur handler:

  • Validates for empty or duplicate names.

  • Shows error messages accordingly.

  • Calls updateNodeName in the store if valid.

• Synchronizes the input field state when node type or name changes.

Usage Example

const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
  id: nodeId,
  data: nodeData,
});

// Usage in input:
// <input value={name} onBlur={handleNameBlur} onChange={handleNameChange} />

Important Implementation Details

• Uniqueness Validation: Both hooks prevent duplicate names. For tool nodes, uniqueness is checked among sibling tools; for general nodes, globally among all graph nodes.

• State Synchronization: The hooks synchronize their internal name state with the global store and props, ensuring the UI reflects the latest valid name.

• Use of useMemo and useCallback: Optimizes performance by memoizing values and handlers that only update when dependencies change.

• Error Handling: Uses the message.error UI component to show inline feedback on invalid inputs.

• Integration with Global Store: Uses useGraphStore for:

  • Fetching nodes and tools.

  • Updating node names or forms.

  • Getting node operator types.

Interaction with Other Parts of the System

• useGraphStore: Central global state management hook for graph nodes and their metadata.

• UI Components: The hooks are designed to be used inside React components rendering node name input fields.

• Utility Functions: Uses getAgentNodeTools to extract tools from a node, ensuring tool-specific logic is encapsulated.

• Constants: Uses the Operator enum to distinguish between tool nodes and other node types.

• Message UI: Displays validation errors to users in a consistent manner.

Mermaid Diagram: Flowchart of Hook Functions and Their Relationships

flowchart TD
    A[useHandleNodeNameChange] -->|Calls internally| B[useHandleTooNodeNameChange]
    A -->|Uses| C[useGraphStore]
    B -->|Uses| C
    B -->|Uses| D[getAgentNodeTools]
    A -->|Handles| E[General Node Name Change]
    B -->|Handles| F[Tool Node Name Change]
    A -->|Exposes| G[name, handleNameBlur, handleNameChange]
    B -->|Exposes| H[handleToolNameBlur, previousToolName]

Summary

The use-change-node-name.ts file provides robust, reusable React hooks for managing node and tool name changes within a graph application. It enforces validation rules, integrates with a global graph store, and supports clear user feedback for invalid inputs. These hooks modularize the complex logic involved in node renaming, making them easy to integrate into UI components and maintain over time.