tool-command.tsx

Overview

The tool-command.tsx file provides React components and hooks to render customizable command menus with selectable options. It serves as a user interface tool for selecting various operators or MCP (Multi-Cloud Platform) servers through searchable command inputs. The components support multi-selection and notify parent components via callbacks when selections change.

Key functionalities include:

• Displaying grouped command menus with categorized operator options.

• Dynamically loading MCP server options from a backend hook.

• Managing selection state with toggle behavior.

• Providing visual feedback for selected items using icons and styling.

• Internationalization support for labels and placeholders.

This file is designed to be used within a larger React-based application that involves agents, operators, and MCP servers, facilitating user interaction with these entities.

Components and Functions

1. ToolCommand

Description

A React component rendering a command menu with predefined groups of operator options. Users can search and select multiple operators from categorized lists.

Props

Usage Example

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

Details

• Renders a searchable Command input.

• Groups operator options by categories such as Search, Communication, Developer.

• Uses the useHandleSelectChange hook to maintain selected state.

• Each option is displayed with an OperatorIcon and translated label.

• Supports multi-selection toggling per option.

2. MCPCommand

Description

A React component rendering a command menu populated dynamically with MCP server options fetched from a backend via useListMcpServer hook.

Props

Usage Example

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

Details

• Uses useListMcpServer to fetch MCP server data.

• Renders each MCP server as a selectable command item.

• Manages selection state with useHandleSelectChange.

• Displays a placeholder and handles empty search results gracefully.

3. ToolCommandItem

Description

A subcomponent representing a selectable command item with a checkbox-style indicator and label/content.

Props

Usage Example

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

Details

• Displays a clickable item with a styled checkbox indicator.

• Shows a checkmark icon when selected.

• Calls toggleOption with the item id when selected.

4. useHandleSelectChange

Description

A custom React hook managing an array of selected option IDs with toggle functionality.

Parameters

Returns

Usage Example

const { toggleOption, currentValue } = useHandleSelectChange({ value, onChange });

Details

• Initializes internal state with value if provided.

• Provides toggleOption to add/remove an option ID from current selections.

• Calls onChange callback with updated selections.

• Listens for external value changes and updates internal state accordingly.

Important Implementation Details

• Internationalization: The component uses i18next (t function) to translate UI text such as group labels, placeholders, and option names for multilingual support.

• Styling and Icons: Uses utility function cn to conditionally apply CSS classes. Selection is visually indicated via a border and background color toggle, and a checkmark icon from lucide-react.

• Operator Categorization: Operators are grouped into labeled categories (Search, Communication, Developer) defined in the Menus constant, which maps operator constants imported from @/pages/agent/constant.

• Data Fetching: MCP server options are fetched asynchronously using the useListMcpServer hook, allowing dynamic population of options.

• Selection Management: The reusable useHandleSelectChange hook centralizes selection logic to support multiple components consistently.

• Composition: The command list is composed using multiple UI components (Command, CommandInput, CommandList, CommandGroup, CommandItem) imported from a local UI library, enforcing consistent UX and accessibility standards.

Interaction with Other Parts of the System

• Operator Constants: Uses Operator enum/constants that define available operator IDs.

• Operator Icons: Renders operator-specific icons with OperatorIcon component.

• Internationalization Setup: Depends on i18next for translations.

• MCP Server Data: Fetches MCP server list from backend via useListMcpServer hook.

• UI Library Components: Relies on a custom UI command menu system (Command, CommandInput, etc.) for rendering.

• Utility Functions: Uses cn for className merging and lowerFirst from lodash for string formatting.

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 is a key UI utility for rendering categorized, searchable, and multi-select command menus of operators and MCP servers. It cleanly separates concerns with reusable components and hooks, supports i18n, and integrates seamlessly with backend data and shared UI components. The file enhances user experience by providing intuitive selection controls and dynamic data-driven options in a maintainable, scalable way.