use-watch-change.ts

Overview

The use-watch-change.ts file defines a custom React hook named useWatchFormChange that integrates form state watching with a visual graph-based agent system. It leverages React Hook Form’s useWatch to monitor changes in form inputs and synchronizes these changes with nodes in a graph data structure maintained in a central store (useGraphStore). This synchronization updates the node's configuration on the canvas, reflecting changes made in the form UI.

This hook is primarily used in contexts where users configure tools or modules (referred to as MCPs) connected in a graph, ensuring that changes in form inputs dynamically update the graph nodes' internal state.

Detailed Explanation

useWatchFormChange(form?: UseFormReturn<any>)

Description

A React hook that watches for changes in a controlled form's values and updates a corresponding graph node's data accordingly. It connects form state changes with the graph's node state, propagating updates to the canvas representation.

Parameters

• form (UseFormReturn<any>, optional):
  The React Hook Form instance controlling the form. This contains form methods and state, including control and getValues.

Returns

• void: This hook does not return any value. It is designed for side effects — watching form changes and updating graph nodes.

Functionality & Workflow

1. Watching form values:
   Uses useWatch with the form's control to subscribe to value changes.

2. Accessing graph state:
   Retrieves state and actions from useGraphStore:

   • clickedToolId: currently selected tool's ID

   • clickedNodeId: currently selected graph node's ID

   • findUpstreamNodeById: function to locate an upstream node by its ID

   • updateNodeForm: function to update a node’s form data

3. Fetching MCP server data:
   Calls useGetMcpServer with the clickedToolId to fetch server data related to tools.

4. Computing filtered MCP tools:
   Uses useMemo to derive a subset of tools (nextMCPTools) filtered from the fetched data based on form values (values.items). It uses Lodash's pick to select only relevant tools.

5. Synchronizing updates:
   In a useEffect hook with dependencies on relevant IDs and computed values:

   • Finds the agent node upstream of the clicked node.

   • Retrieves the agent node's MCP configuration.

   • Maps over MCPs, replacing the MCP matching the clicked tool with updated tool data (nextMCPTools).

   • Calls updateNodeForm to update the node's form data on the canvas, triggering UI synchronization.

Implementation Details & Algorithms

• Reactive Form Watching: Utilizes React Hook Form’s useWatch to listen to changes in form control, ensuring real-time updates without manual event listeners.

• Memoization: Uses useMemo to optimize computation of nextMCPTools, preventing unnecessary recalculations unless dependencies change.

• Graph Node Lookup: Uses a custom store method findUpstreamNodeById to locate the agent node related to the currently clicked node, enabling context-aware updates.

• Selective Update: Updates only the MCP configuration that corresponds to the currently selected tool, leaving others unchanged.

• Data Picking: Uses Lodash’s pick method to filter the tools object by keys stored in form values, ensuring only relevant tools are propagated.

Interaction with Other System Parts

• useGetMcpServer hook: Fetches MCP (Multi-Component Processor or similar domain concept) server data based on the currently selected tool ID. This data feeds into filtering steps for updating tools.

• useGraphStore state management:
  Central to graph node state management, this store holds:

  • Current selections (clickedToolId, clickedNodeId)

  • Utility functions for node lookup and updating (findUpstreamNodeById, updateNodeForm)

• getAgentNodeMCP utility: Extracts MCP configurations from a given agent node, allowing the hook to read and modify MCP data structures.

• React Hook Form: Provides form state and change tracking functionality.

This hook acts as a bridge connecting form UI changes to the graph node configuration, ensuring that user inputs via forms are faithfully represented in the visual graph model.

Usage Example

import { useForm } from 'react-hook-form';
import { useWatchFormChange } from './use-watch-change';

function AgentToolForm() {
  const form = useForm({
    defaultValues: {
      items: [], // keys of selected tools
      // other form fields...
    },
  });

  // Sync form changes to graph nodes
  useWatchFormChange(form);

  return (
    <form>
      {/* form inputs bound to form control */}
    </form>
  );
}

In this example, useWatchFormChange takes the form instance and automatically watches for changes, updating graph nodes accordingly.

Mermaid Class Diagram

The following diagram illustrates the key functions and their relationships within the useWatchFormChange hook and its interaction with imported utilities and store state.

classDiagram
    class useWatchFormChange {
        +useWatchFormChange(form?: UseFormReturn)
    }

    class useWatch {
        +useWatch(options)
    }

    class useGraphStore {
        +clickedToolId: string
        +clickedNodeId: string
        +findUpstreamNodeById(id): AgentNode
        +updateNodeForm(id, data, keys)
    }

    class useGetMcpServer {
        +useGetMcpServer(toolId): { data }
    }

    class getAgentNodeMCP {
        +getAgentNodeMCP(agentNode): MCPList
    }

    useWatchFormChange --> useWatch : watches form values
    useWatchFormChange --> useGraphStore : accesses graph state and actions
    useWatchFormChange --> useGetMcpServer : fetches MCP server data
    useWatchFormChange --> getAgentNodeMCP : retrieves MCP config from agent node

Summary

• Purpose: Synchronizes form input changes with graph node MCP configurations in a React application.

• Core logic: Watches form values, filters MCP tools based on those values, and updates the graph node form data accordingly.

• Key integrations: React Hook Form, a custom graph store (useGraphStore), MCP server data fetching, and utility functions for node MCP extraction.

• Use case: Ideal for graphical user interfaces where form configurations correspond directly to graph node states.

This file is a crucial connector for maintaining consistency between UI form inputs and the graph-based agent configuration in the application.