agent-tools.tsx

Overview

The agent-tools.tsx file provides React components and utility functions for managing and displaying "tools" and "agents" in a flow-based UI system. These components allow users to view, edit, add, and delete various tool and agent nodes within a graphical flow editor. The file integrates tightly with the system's global state store (useGraphStore), context (AgentInstanceContext), and various hooks to fetch and manipulate agent/tool data.

Key functionalities include:

• Displaying lists of agent "tools" and "agents" with action buttons to edit or delete.

• Providing UI components styled consistently with tooltips and icons.

• Interacting with the flow editor's graph structure to select nodes, add new nodes, or open configuration forms.

• Leveraging context and hooks to encapsulate domain-specific logic (e.g., finding nodes, deleting nodes).

Components and Functions

1. ToolCard

function ToolCard({
  children,
  className,
  ...props
}: PropsWithChildren & React.HTMLAttributes<HTMLLIElement>): JSX.Element

Description

ToolCard is a presentational component that renders a list item (<li>) with a consistent style for each tool or agent entry. It conditionally wraps the card with a tooltip if the tool type is Operator.Code, indicating no configuration is available.

Parameters

• children: React nodes to be rendered inside the card (usually the tool or agent name and icons).

• className: Optional additional CSS classes to apply.

• ...props: Any other HTML list item attributes.

Returns

• A styled <li> element or a tooltip-wrapped <li> if children equals Operator.Code.

Usage Example

<ToolCard>
  <div>My Tool Name</div>
</ToolCard>

2. ActionButton

function ActionButton<T>({
  record,
  deleteRecord,
  edit,
}: ActionButtonProps<T>): JSX.Element

Description

Renders a pair of action icons (edit and delete) for a given record. It accepts generic type T for flexibility on what a "record" can be (tool name string or ID).

Parameters

• record: T: The data record associated with the action buttons.

• deleteRecord(record: T): void: Callback to invoke when the delete icon is clicked.

• edit: MouseEventHandler<HTMLOrSVGElement>: Handler for edit icon click events.

Returns

• A <div> containing a pencil icon for editing and an "X" icon for deletion.

Usage Example

<ActionButton
  record={"tool1"}
  deleteRecord={(tool) => console.log("Delete", tool)}
  edit={(e) => console.log("Edit", e)}
/>

3. AgentTools

function AgentTools(): JSX.Element

Description

Displays a section listing all tools and MCPs (multi-channel processors) associated with the current agent instance. Each tool/MCP is shown within a ToolCard with action buttons to edit or delete. It also provides a button wrapped in a popover to add new tools.

Internal Logic

• Uses hooks to get tool names (useGetAgentToolNames) and MCP IDs (useGetAgentMCPIds).

• Uses context and graph store to handle editing and deleting nodes.

• handleEdit opens a form drawer to edit the currently selected tool node.

• Lists tools and MCPs separately but visually similar.

• Adds a ToolPopover wrapping an "Add Tools" button for adding new tools.

Returns

• A <section> containing:

  • A header label.

  • A list (<ul>) of tool and MCP cards.

  • A button to add tools.

Usage Example

<AgentTools />

4. Agents

function Agents({ node }: INextOperatorForm): JSX.Element

Description

Displays a list of downstream agent nodes connected to the given operator/node in the graph. Each downstream agent is shown in a ToolCard with edit and delete actions. Also provides a button to add a new agent node below the current node.

Parameters

• node: INextOperatorForm — The current node/operator data including its id.

Internal Logic

• Uses filterDownstreamAgentNodeIds utility to find downstream agent nodes.

• Uses graph store and context for state management and UI interaction.

• handleEdit opens the form drawer to edit a selected agent node.

• addCanvasNode from context is used to add a new agent node positioned below the current node.

Returns

• A <section> containing:

  • A header label.

  • A list (<ul>) of downstream agent nodes.

  • A button to add an agent below the current node.

Usage Example

<Agents node={currentNode} />

Important Implementation Details

• Memoization: ToolCard uses useMemo to avoid unnecessary re-renders when props or children do not change.

• Event Handling: ActionButton uses useCallback to memoize the delete handler.

• Context Usage: AgentInstanceContext provides important operations like showing form drawers and adding canvas nodes.

• Global State: useGraphStore is a Zustand-based global state store for graph nodes, edges, and selections.

• Separation of Concerns: Tool and MCP management logic are abstracted into custom hooks (useGetAgentToolNames, useDeleteAgentNodeTools, etc.).

• Internationalization: Uses i18next (t) for localized strings.

• UI Library Usage: Imports UI components such as buttons and tooltips from the app's UI library and icons from lucide-react.

• TypeScript Generics: ActionButton is generic to support various record types (string tool names or IDs).

• Downstream Node Filtering: Uses a utility function filterDownstreamAgentNodeIds to find relevant downstream agent nodes for display.

Interaction with Other Parts of the System

• Global Store (useGraphStore): This file reads from and updates the graph state, including node selections, additions, and deletions.

• AgentInstanceContext: Provides UI controls and shared callbacks relevant to the agent editing environment.

• Custom Hooks: Hooks like useFindMcpById, useDeleteAgentNodeMCP, and useDeleteAgentNodeTools encapsulate domain-specific data retrieval and mutation.

• UI Components: Leverages common UI components like BlockButton, Tooltip, and ToolPopover to ensure consistent look and feel.

• Operator Constants: Uses the Operator enum to identify and differentiate tool types.

• Graph Data: Works with nodes and edges representing the flow graph, managing downstream relationships and positioning.

Visual Diagram

classDiagram
    class ToolCard {
        +children: ReactNode
        +className?: string
        +props: HTMLLIElement attributes
        +render(): JSX.Element
    }

    class ActionButton~T~ {
        +record: T
        +deleteRecord(record: T): void
        +edit: MouseEventHandler
        +render(): JSX.Element
    }

    class AgentTools {
        +toolNames: string[]
        +mcpIds: string[]
        +handleEdit: MouseEventHandler
        +render(): JSX.Element
    }

    class Agents {
        +node: INextOperatorForm
        +handleEdit(nodeId: string): MouseEventHandler
        +render(): JSX.Element
    }

    ToolCard <|-- AgentTools : uses
    ToolCard <|-- Agents : uses
    ActionButton <|-- AgentTools : uses
    ActionButton <|-- Agents : uses

Summary

agent-tools.tsx is a key UI module for managing agent tools and downstream agents within a flow-based editor application. It provides reusable components with editing and deletion capabilities, tightly integrated with global graph state and domain-specific logic for tools and MCPs. The file emphasizes modularity, memoization, and consistent UI/UX, serving as a bridge between the graph data model and the user interface.

End of Documentation