use-change-node-name.ts

Overview

This file provides React hooks for managing the renaming of nodes within a graph-based user interface, specifically focusing on two node types: generic nodes and "tool" nodes. It handles user input for node names, validates uniqueness and non-emptiness, updates application state accordingly, and provides user feedback on invalid inputs.

The main functionality includes:

• Tracking and updating node names with state synchronization.

• Validating new names to prevent duplicates or empty values.

• Handling special cases for tool nodes, which are subcomponents of nodes with individual names.

• Integrating with a centralized graph store that manages nodes and their properties.

Detailed Explanation

Imports

• message from a UI component library for displaying error notifications.

• trim from lodash for sanitizing input strings.

• React hooks: useCallback, useEffect, useMemo, useState.

• Constants and utilities related to graph nodes and tools.

• Custom store hook useGraphStore for accessing graph state and methods.

useHandleTooNodeNameChange

Purpose

A custom hook to handle name changes specifically for "tool" nodes—subcomponents attached to a parent node. It performs validation, updates tool names in the node data, and manages error reporting.

Parameters

• id?: string — The ID of the parent node to which the tool belongs.

• name?: string — The current name input string for the tool.

• setName: Dispatch<SetStateAction<string>> — State setter function to update the tool name in the component using this hook.

Returns

• handleToolNameBlur: () => void — A callback function to be triggered on input blur to validate and update the tool name.

• previousToolName: string | undefined — The previous valid name of the tool (used to revert on invalid input).

Implementation Details

• Retrieves the parent node and its associated tools from the graph store.

• Uses useMemo to get the previous name of the currently selected tool based on clickedToolId.

• On blur (handleToolNameBlur), it trims the input and checks:

  • If the name is empty or duplicates another tool's name, it reverts the input and shows an error message.

  • Otherwise, updates the tool's name in the node's tools list and persists the change via updateNodeForm.

Usage Example

const { handleToolNameBlur, previousToolName } = useHandleTooNodeNameChange({
  id: "parentNodeId",
  name: currentToolName,
  setName: setCurrentToolName,
});

// In input element:
// <input value={currentToolName} onBlur={handleToolNameBlur} />

useHandleNodeNameChange

Purpose

A custom hook to handle renaming of general nodes, including tool nodes by internally delegating to useHandleTooNodeNameChange. It manages local state for the node name, validates uniqueness, updates store state, and handles input changes.

Parameters

• id?: string — The ID of the node.

• data: any — The node's data object, which includes the current name and other properties.

Returns

• name: string — The current name state for the input field.

• handleNameBlur: () => void — Callback to validate and update the node name on input blur.

• handleNameChange: (e: ChangeEvent<any>) => void — Callback to handle input changes.

Implementation Details

• Initializes local state name with an empty string.

• Retrieves graph store methods: updateNodeName, nodes, and getOperatorTypeFromId.

• Determines if the current node is a tool node via getOperatorTypeFromId.

• For tool nodes, delegates name change handling to useHandleTooNodeNameChange.

• On blur for normal nodes (handleNameBlur):

  • Checks if the trimmed name is empty or duplicates an existing node name.

  • Shows error messages and reverts to the previous name if invalid.

  • Otherwise, calls updateNodeName to update the node's name in the store.

• Synchronizes the local name state with the external data or tool name on node change.

Usage Example

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

// In input element:
// <input value={name} onBlur={handleNameBlur} onChange={handleNameChange} />

Important Implementation Details and Algorithms

• Name Validation: Both hooks enforce name uniqueness within their scope (tools within a node, or nodes within the graph). They also disallow empty names by trimming input.

• State Synchronization: The hooks maintain a local input state (name) that is synchronized with the external node data and the graph store, ensuring UI consistency.

• Error Handling: Uses a UI message component to display errors when input violates validation rules.

• Separation of Concerns: Tool node name changes are handled separately but integrated into the general node naming system, allowing reuse and modularity.

• React Hook Optimization: Uses useCallback and useMemo to optimize performance and avoid unnecessary recalculations or function recreations.

Interaction with Other System Parts

• Graph Store (useGraphStore): This file heavily relies on the centralized graph store for reading and updating node and tool states.

• UI Components: The hooks are designed to be used in React input components for node renaming interfaces.

• Utility Functions (getAgentNodeTools): Used to extract tool nodes from a parent node.

• Constants (Operator): Used to distinguish tool nodes from other node types.

• Messaging UI (message): For user feedback on invalid operations.

These hooks act as controllers between the UI and the graph state, ensuring consistent and validated updates.

Mermaid Diagram

flowchart TD
    A[useHandleNodeNameChange] --> B{Is Tool Node?}
    B -- Yes --> C[useHandleTooNodeNameChange]
    B -- No --> D[handleNameBlur]
    C --> E[handleToolNameBlur]
    A --> F[handleNameChange]
    D --> G[Validate Name Uniqueness & Non-empty]
    E --> H[Validate Tool Name Uniqueness & Non-empty]
    G --> I[Call updateNodeName in store]
    H --> J[Call updateNodeForm in store]
    I & J --> K[Update Graph Store]
    K --> L[Reflect changes in UI]

Summary

This file encapsulates the logic needed for renaming nodes and their sub-tools within a graph UI, ensuring data integrity and a smooth user experience. It cleanly separates tool node name handling, validates input, and updates centralized state while providing helpful error messages. The hooks here are essential for maintaining consistent and user-friendly node naming throughout the application.