tool-command.tsx

Overview

The tool-command.tsx file defines React components for rendering interactive command selection UIs within an application. These components present categorized command options or MCP (Microservice Control Plane) servers to users, allowing them to select one or multiple commands or servers via a searchable dropdown interface.

The file leverages reusable UI components (Command, CommandInput, CommandList, etc.) for creating accessible command palettes. It manages internal state for selected commands and supports controlled components by accepting value and onChange props.

Two main command components are exported:

• ToolCommand: Displays a predefined categorized list of commands ("Menus") for user selection.

• MCPCommand: Displays a dynamic list of MCP servers fetched via a custom hook.

Supporting these is the reusable ToolCommandItem component that renders individual selectable command items.

Components and Functions

1. ToolCommand

function ToolCommand({ value, onChange }: ToolCommandProps): JSX.Element

Description

• Renders a command palette with grouped commands divided into categories like "Search", "Communication", and "Developer".

• Enables multi-selection of commands.

• Supports filtering/searching through the command input.

• Calls onChange callback when selection changes.

Props

Usage Example

<ToolCommand 
  value={['Google', 'GitHub']} 
  onChange={(newSelection) => console.log(newSelection)} 
/>

Details

• Uses the useHandleSelectChange hook internally for managing selection state.

• Iterates over static Menus array, which is localized using i18next (t function).

• Displays an icon and localized label for each command.

• Uses ToolCommandItem for rendering individual command entries with checkboxes.

2. MCPCommand

function MCPCommand({ value, onChange }: ToolCommandProps): JSX.Element

Description

• Displays a command palette populated with MCP servers fetched via the useListMcpServer hook.

• Allows multi-selection of MCP servers.

• Supports searching/filtering.

• Calls onChange callback on selection changes.

Props

Usage Example

<MCPCommand 
  value={['server-1']} 
  onChange={(newSelection) => console.log(newSelection)} 
/>

Details

• Uses useListMcpServer to fetch MCP server data asynchronously.

• Utilizes useHandleSelectChange for selection management.

• Renders each MCP server name inside ToolCommandItem.

• Displays a placeholder prompting user input.

3. ToolCommandItem

function ToolCommandItem({ toggleOption, id, isSelected, children }: ToolCommandItemProps & PropsWithChildren): JSX.Element

Description

• Represents a single selectable command item with checkbox-style UI.

• Shows a check icon when selected.

• Calls toggleOption to toggle selection.

Props

Usage Example

<ToolCommandItem 
  id="GitHub" 
  isSelected={true} 
  toggleOption={(id) => console.log(`Toggled ${id}`)}
>
  <OperatorIcon name="GitHub" />
  <span>GitHub</span>
</ToolCommandItem>

4. useHandleSelectChange

function useHandleSelectChange({ onChange, value }: ToolCommandProps) : { toggleOption: (option: string) => void; currentValue: string[] }

Description

• Custom React hook to manage the internal state of selected options for the command components.

• Initializes selection state from the controlled value prop.

• Provides a toggleOption function to add or remove options from current selection.

• Calls the onChange callback with updated selection.

Parameters

Returns

Usage Example

const { toggleOption, currentValue } = useHandleSelectChange({ value, onChange });
toggleOption('Google'); // toggles "Google" in/out of the selection

Important Implementation Details

• State Synchronization: The hook useHandleSelectChange monitors the controlled value prop and updates internal state accordingly on prop changes, ensuring controlled/uncontrolled flexibility.

• Localization: All labels and placeholder texts are localized using the i18next library (t function).

• Selection UI: The selection checkbox uses the CheckIcon from lucide-react and conditional styling based on whether the item is selected.

• Performance Optimization: toggleOption is memoized with useCallback to prevent unnecessary re-renders.

• Dynamic Data Loading: MCPCommand fetches data asynchronously from the backend via useListMcpServer hook, which presumably returns MCP server info.

Interactions with Other Parts of the System

• UI Components: Relies heavily on the @/components/ui/command set of components (Command, CommandInput, CommandList, etc.) which provide the underlying command palette UI.

• Icons: Uses OperatorIcon component to render icons corresponding to each operator/command.

• Constants: Uses Operator constants imported from @/pages/agent/constant to identify commands.

• Hooks: Uses useListMcpServer for fetching MCP server data.

• Localization: Integrates with i18next for translation.

• Utility Functions: Uses cn for conditional classNames and lowerFirst from lodash for string formatting.

• Parent Components: These components are designed to be integrated where command palettes or searchable multi-select dropdowns for commands or servers are needed, likely in agent or flow configuration UIs.

Visual Diagram

classDiagram
    class ToolCommand {
        +value?: string[]
        +onChange?(values: string[]): void
        +render()
    }

    class MCPCommand {
        +value?: string[]
        +onChange?(values: string[]): void
        +render()
    }

    class ToolCommandItem {
        +id: string
        +isSelected: boolean
        +toggleOption(id: string): void
        +children: ReactNode
        +render()
    }

    class useHandleSelectChange {
        +toggleOption(option: string): void
        +currentValue: string[]
    }

    ToolCommand o-- ToolCommandItem : renders
    MCPCommand o-- ToolCommandItem : renders
    ToolCommand ..> useHandleSelectChange : uses
    MCPCommand ..> useHandleSelectChange : uses

Summary

The tool-command.tsx file provides reusable, localized, and accessible React components to render searchable, multi-select command palettes featuring categorized commands or dynamically fetched MCP servers. It abstracts selection logic into a custom hook and composes UI from modular command components, integrating with icons, localization, and data fetching hooks to build rich interactive selection experiences.