Jump to content

Connect SuperML | Leeroopedia MCP: Equip your AI agents with best practices, code verification, and debugging knowledge. Powered by Leeroo — building Organizational Superintelligence. Contact us at founders@leeroo.com.

Implementation:Microsoft Autogen Studio Common Fields

From Leeroopedia
Sources Microsoft_Autogen
Domains Frontend, React, Form Fields, Component Configuration
Last Updated 2026-02-11 17:00 GMT

Overview

Description

The NodeEditorFields component (exported from fields.tsx) is a routing component that dispatches to type-specific field editors based on the component type being edited. It acts as a central coordinator that examines the component type and renders the appropriate specialized field editor (TeamFields, AgentFields, ModelFields, etc.). This component ensures consistent field editing across all component types within the team builder.

The file also provides shared utilities and the DetailGroup component for organizing field sections.

Usage

Used within ComponentEditor or other editing contexts to automatically render the correct field editor based on component type. It eliminates the need for parent components to implement type checking and field routing logic, providing a single unified interface for all component types.

Code Reference

Source Location: python/packages/autogen-studio/frontend/src/components/views/teambuilder/builder/component-editor/fields/fields.tsx

Signature: 

export interface NodeEditorFieldsProps {
  component: Component<ComponentConfig>;
  onNavigate: (componentType: string, id: string, parentField: string) => void;
  workingCopy: Component<ComponentConfig> | null;
  setWorkingCopy: (component: Component<ComponentConfig> | null) => void;
  editPath: EditPath[];
  updateComponentAtPath: (
    root: Component<ComponentConfig>,
    path: EditPath[],
    updates: Partial<Component<ComponentConfig>>
  ) => Component<ComponentConfig>;
  getCurrentComponent: (
    root: Component<ComponentConfig>
  ) => Component<ComponentConfig> | null;
}

const NodeEditorFields: React.FC<NodeEditorFieldsProps> = ({
  component,
  onNavigate,
  workingCopy,
  setWorkingCopy,
  editPath,
  updateComponentAtPath,
  getCurrentComponent,
}) => { /* ... */ }

Import: 

import NodeEditorFields from "./fields/fields";

I/O Contract

Props/Inputs

Parameter Type Required Description
component Component<ComponentConfig> Yes Component to edit (any type)
onNavigate (type: string, id: string, field: string) => void Yes Navigate to nested components
workingCopy null Yes Working copy root for nested editing
setWorkingCopy (component) => void Yes Update working copy
editPath EditPath[] Yes Current navigation path
updateComponentAtPath Function Yes Update nested component helper
getCurrentComponent Function Yes Get current component from path helper

Outputs

Output Type Description
Field updates via setWorkingCopy Updates propagated through working copy mechanism
Navigation events via onNavigate Nested component navigation requests

Key Features

Type-Based Routing

The component uses type guards to determine which field editor to render: 

if (isTeamComponent(component)) {
  return <TeamFields ... />;
} else if (isAgentComponent(component)) {
  return <AgentFields ... />;
} else if (isModelComponent(component)) {
  return <ModelFields ... />;
} else if (isToolComponent(component)) {
  return <ToolFields ... />;
} else if (isWorkbenchComponent(component)) {
  return <WorkbenchFields ... />;
} else if (isTerminationComponent(component)) {
  return <TerminationFields ... />;
}

Working Copy Propagation

All field editors receive consistent update handlers that: 1. Accept partial component updates 2. Apply updates via updateComponentAtPath 3. Update the working copy via setWorkingCopy

Example update handler: 

onChange={(updates) => {
  if (workingCopy && setWorkingCopy && editPath && updateComponentAtPath) {
    const updatedCopy = updateComponentAtPath(workingCopy, editPath, updates);
    setWorkingCopy(updatedCopy);
  }
}}

Consistent Interface

All field editors wrapped in DetailGroup with consistent title:

  • Teams: "Configuration"
  • Agents: "Configuration"
  • Models: "Configuration"
  • Workbenches: "Workbench Configuration"
  • Termination: "Configuration"

Deprecated Tool Support

The component includes commented-out code for individual tool editing:

  • Tools are now managed within workbenches
  • Individual tool components are deprecated
  • Code kept for backward compatibility reference

Supported Component Types

Component Type Field Editor Description
team TeamFields Team structure, participants, termination
agent AgentFields Agent configuration, models, tools, workbenches
model ModelFields Model API settings and parameters
workbench WorkbenchFields Workbench-specific configuration
tool ToolFields Function tool source code (deprecated, use workbench)
termination TerminationFields Termination conditions and logic

Type Guards Used

The component relies on type guard functions:

  • isTeamComponent(component) - Checks for team type
  • isAgentComponent(component) - Checks for agent type
  • isModelComponent(component) - Checks for model type
  • isToolComponent(component) - Checks for tool type
  • isWorkbenchComponent(component) - Checks for workbench type
  • isTerminationComponent(component) - Checks for termination type

Usage Examples

Basic Usage

import NodeEditorFields from "./fields/fields";

function ComponentForm({
  component,
  workingCopy,
  editPath,
  onUpdate,
  onNavigate
}) {
  return (
    <NodeEditorFields
      component={component}
      onNavigate={onNavigate}
      workingCopy={workingCopy}
      setWorkingCopy={onUpdate}
      editPath={editPath}
      updateComponentAtPath={updateComponentAtPath}
      getCurrentComponent={getCurrentComponent}
    />
  );
}

Within ComponentEditor

This component is typically used within ComponentEditor: 

// Inside ComponentEditor render method
{!isJsonEditing && (
  <NodeEditorFields
    component={currentComponent}
    onNavigate={handleNavigate}
    workingCopy={workingCopy}
    setWorkingCopy={setWorkingCopy}
    editPath={editPath}
    updateComponentAtPath={updateComponentAtPath}
    getCurrentComponent={getCurrentComponent}
  />
)}

Custom Routing Extension

To add support for a new component type: 

else if (isCustomComponent(component)) {
  specificFields = (
    <DetailGroup title="Custom Configuration">
      <CustomFields
        component={component}
        onChange={(updates) => {
          if (workingCopy && setWorkingCopy && editPath && updateComponentAtPath) {
            const updatedCopy = updateComponentAtPath(workingCopy, editPath, updates);
            setWorkingCopy(updatedCopy);
          }
        }}
      />
    </DetailGroup>
  );
}

DetailGroup Component

The file likely includes a DetailGroup utility component for consistent field grouping: 

// Typical DetailGroup usage
<DetailGroup title="Configuration">
  <FieldComponent ... />
</DetailGroup>

DetailGroup provides:

  • Consistent styling across field groups
  • Collapsible sections
  • Icon support
  • Title formatting

Integration Points

Field Editor Components

Component Import Path
TeamFields ./team-fields
AgentFields ./agent-fields
ModelFields ./model-fields
ToolFields ./tool-fields
WorkbenchFields ./workbench
TerminationFields ./termination-fields

Type Guards

All type guards imported from: 

import {
  isTeamComponent,
  isAgentComponent,
  isModelComponent,
  isToolComponent,
  isTerminationComponent,
  isWorkbenchComponent,
} from "../../../../../types/guards";

Data Types

import {
  Component,
  ComponentConfig,
} from "../../../../../types/datamodel";

Design Pattern

This component implements the Strategy Pattern:

  • Context: NodeEditorFields (this component)
  • Strategies: TeamFields, AgentFields, ModelFields, etc.
  • Selection Logic: Type guard checks
  • Benefits:
    • Single entry point for all field editing
    • Type-safe dispatch based on component type
    • Consistent update handling across all editors
    • Easy to extend with new component types

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment
Retrieved from "https://leeroopedia.com/index.php?title=Implementation:Microsoft_Autogen_Studio_Common_Fields&oldid=3579"