Implementation:Microsoft Autogen Studio Termination Fields

Sources	Microsoft_Autogen
Domains	Frontend, React, Termination Conditions, Form Fields
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The TerminationFields component provides a comprehensive interface for configuring termination conditions in AutoGen teams. It supports multiple termination types (max messages, text mention, token usage, timeout, handoff, etc.) and combination conditions (OR/AND combinations). The component offers a flexible UI for composing complex termination logic with nested conditions, add/remove operations, and type-specific configuration fields.

Termination conditions determine when conversations should end, including:

• Message count limits
• Text pattern matching
• Token usage thresholds
• Timeout limits
• Agent handoffs
• Source matching
• Custom external conditions

Usage

Used within ComponentEditor to render termination condition configuration fields. It handles both simple termination conditions and complex combination conditions (OR/Combination) that contain nested sub-conditions. The component provides a dynamic UI that adapts to the termination type being configured.

Code Reference

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

Signature:

interface TerminationFieldsProps {
  component: Component<TerminationConfig>;
  onChange: (updates: Partial<Component<ComponentConfig>>) => void;
  onNavigate?: (componentType: string, id: string, parentField: string) => void;
}

export const TerminationFields: React.FC<TerminationFieldsProps> = ({
  component,
  onChange,
  onNavigate,
}) => { /* ... */ }

Import:

import { TerminationFields } from "./fields/termination-fields";

I/O Contract

Props/Inputs

Parameter	Type	Required	Description
component	Component<TerminationConfig>	Yes	Termination condition component to configure
onChange	(updates: Partial<Component<ComponentConfig>>) => void	Yes	Callback for component updates
onNavigate	(type: string, id: string, field: string) => void	No	Navigate to nested conditions (unused currently)

Outputs

Output	Type	Description
onChange callback	Partial<Component<ComponentConfig>>	Emits termination configuration updates

Supported Termination Types

Simple Conditions

Type	Provider	Description	Config Fields
Max Messages	MaxMessageTermination	Terminate after N messages	max_messages, include_agent_event
Text Mention	TextMentionTermination	Terminate when text appears	text
Stop Message	StopMessageTermination	Terminate on stop message	(none)
Token Usage	TokenUsageTermination	Terminate after token limit	max_total_token
Timeout	TimeoutTermination	Terminate after time limit	timeout_seconds
Handoff	HandoffTermination	Terminate on agent handoff	target
Source Match	SourceMatchTermination	Terminate when source matches	sources (array)
Text Message	TextMessageTermination	Terminate on text message	source
External	ExternalTermination	Custom external condition	(none)

Combination Conditions

Type	Provider	Description	Config Fields
OR Combination	OrTermination	Terminate if any condition met	conditions (array)
AND Combination	CombinationTermination	Terminate if all conditions met	conditions (array)

Termination Type Templates

The component defines templates for creating new conditions:

const TERMINATION_TYPES = {
  MAX_MESSAGE: {
    label: "Max Messages",
    provider: PROVIDERS.MAX_MESSAGE,
    defaultConfig: {
      max_messages: 10,
      include_agent_event: false,
    },
  },
  TEXT_MENTION: {
    label: "Text Mention",
    provider: PROVIDERS.TEXT_MENTION,
    defaultConfig: {
      text: "TERMINATE",
    },
  },
  TOKEN_USAGE: {
    label: "Token Usage",
    provider: PROVIDERS.TOKEN_USAGE,
    defaultConfig: {
      max_total_token: 1000,
    },
  },
  TIMEOUT: {
    label: "Timeout",
    provider: PROVIDERS.TIMEOUT,
    defaultConfig: {
      timeout_seconds: 300,
    },
  },
  // ... more types
};

UI Structure

Simple Termination Rendering

For simple conditions (non-combination), the UI shows:

• Component details (label, description)
• Type-specific configuration fields
• Collapsible sections with icons

Combination Termination Rendering

For OR/AND combinations:

• Conditions List: Shows all nested conditions
• Add Condition: Dropdown to add new condition types
• Remove Condition: Delete button for each condition
• Recursive Rendering: Each condition rendered with TerminationFields

Example structure:

<Collapse>
  <Panel header="Condition Details">
    {/* Label and description fields */}
  </Panel>

  <Panel header="Termination Conditions">
    {conditions.map((condition, index) => (
      <div key={index}>
        <TerminationFields
          component={condition}
          onChange={(updates) => handleConditionUpdate(index, updates)}
        />
        <Button onClick={() => handleRemoveCondition(index)}>
          Remove
        </Button>
      </div>
    ))}

    <Button onClick={() => setShowAddCondition(true)}>
      Add Condition
    </Button>
  </Panel>
</Collapse>

Type-Specific Fields

Max Message Termination

<InputNumber
  value={config.max_messages}
  onChange={(value) => handleConfigUpdate("max_messages", value)}
  min={1}
/>
<Checkbox
  checked={config.include_agent_event}
  onChange={(e) => handleConfigUpdate("include_agent_event", e.target.checked)}
>
  Include Agent Events
</Checkbox>

Text Mention Termination

<Input
  value={config.text}
  onChange={(e) => handleConfigUpdate("text", e.target.value)}
  placeholder="e.g., TERMINATE"
/>

Token Usage Termination

<InputNumber
  value={config.max_total_token}
  onChange={(value) => handleConfigUpdate("max_total_token", value)}
  min={1}
/>

Timeout Termination

<InputNumber
  value={config.timeout_seconds}
  onChange={(value) => handleConfigUpdate("timeout_seconds", value)}
  min={1}
  addonAfter="seconds"
/>

Handoff Termination

<Input
  value={config.target}
  onChange={(e) => handleConfigUpdate("target", e.target.value)}
  placeholder="Target agent name"
/>

Source Match Termination

<Select
  mode="tags"
  value={config.sources}
  onChange={(value) => handleConfigUpdate("sources", value)}
  placeholder="Add source names"
/>

Text Message Termination

<Input
  value={config.source}
  onChange={(e) => handleConfigUpdate("source", e.target.value)}
  placeholder="Source agent name"
/>

Add/Remove Condition Logic

Adding a Condition

const handleAddCondition = () => {
  if (!selectedConditionType || !isCombinationTermination(component)) return;

  const newCondition = createNewCondition(selectedConditionType);
  const currentConditions = component.config.conditions || [];

  handleComponentUpdate({
    config: {
      conditions: [...currentConditions, newCondition],
    },
  });

  setShowAddCondition(false);
  setSelectedConditionType("");
};

const createNewCondition = (type: string) => {
  const template = TERMINATION_TYPES[type];
  return {
    provider: template.provider,
    component_type: "termination",
    version: 1,
    component_version: 1,
    description: `${template.label} termination condition`,
    label: template.label,
    config: template.defaultConfig,
  };
};

Removing a Condition

const handleRemoveCondition = (index: number) => {
  if (!isCombinationTermination(component)) return;

  const currentConditions = [...component.config.conditions];
  currentConditions.splice(index, 1);

  handleComponentUpdate({
    config: {
      conditions: currentConditions,
    },
  });
};

Type Guards Used

The component uses termination-specific type guards:

import {
  isOrTermination,
  isMaxMessageTermination,
  isTextMentionTermination,
  isCombinationTermination,
  isStopMessageTermination,
  isTokenUsageTermination,
  isHandoffTermination,
  isTimeoutTermination,
  isExternalTermination,
  isSourceMatchTermination,
  isTextMessageTermination,
} from "../../../../../types/guards";

Usage Examples

Simple Termination Configuration

import { TerminationFields } from "./fields/termination-fields";

// Max message termination
const maxMessageTermination = {
  provider: "autogen_core.termination.MaxMessageTermination",
  component_type: "termination",
  label: "Max 10 Messages",
  config: {
    max_messages: 10,
    include_agent_event: false,
  }
};

<TerminationFields
  component={maxMessageTermination}
  onChange={(updates) => {
    updateTermination({ ...maxMessageTermination, ...updates });
  }}
/>

Text Mention Termination

const textMentionTermination = {
  provider: "autogen_core.termination.TextMentionTermination",
  component_type: "termination",
  label: "TERMINATE Keyword",
  config: {
    text: "TERMINATE",
  }
};

<TerminationFields
  component={textMentionTermination}
  onChange={handleUpdate}
/>

OR Combination Termination

const orTermination = {
  provider: "autogen_core.termination.OrTermination",
  component_type: "termination",
  label: "Max Messages OR Text Mention",
  config: {
    conditions: [
      {
        provider: "autogen_core.termination.MaxMessageTermination",
        component_type: "termination",
        label: "Max 10 Messages",
        config: { max_messages: 10 }
      },
      {
        provider: "autogen_core.termination.TextMentionTermination",
        component_type: "termination",
        label: "TERMINATE",
        config: { text: "TERMINATE" }
      }
    ]
  }
};

<TerminationFields
  component={orTermination}
  onChange={handleUpdate}
/>

This renders a combination editor where users can: 1. See the list of conditions 2. Add new conditions via dropdown 3. Edit each condition individually 4. Remove conditions

Timeout Termination

const timeoutTermination = {
  provider: "autogen_core.termination.TimeoutTermination",
  component_type: "termination",
  label: "5 Minute Timeout",
  config: {
    timeout_seconds: 300,
  }
};

<TerminationFields
  component={timeoutTermination}
  onChange={handleUpdate}
/>

Token Usage Termination

const tokenTermination = {
  provider: "autogen_core.termination.TokenUsageTermination",
  component_type: "termination",
  label: "1000 Token Limit",
  config: {
    max_total_token: 1000,
  }
};

<TerminationFields
  component={tokenTermination}
  onChange={handleUpdate}
/>

Recursive Rendering

For combination conditions, the component renders itself recursively:

// Inside combination termination rendering
{conditions.map((condition, index) => (
  <div key={index} className="nested-condition">
    <TerminationFields
      component={condition}
      onChange={(updates) => {
        const updatedConditions = [...conditions];
        updatedConditions[index] = { ...condition, ...updates };
        handleComponentUpdate({
          config: { conditions: updatedConditions }
        });
      }}
    />
  </div>
))}

This allows for arbitrarily nested termination logic:

• OR containing AND
• AND containing OR
• Nested combinations of any depth

Related Pages

• Studio Component Editor - Parent editor component
• Studio Agent Fields - Agent configuration
• Studio Common Fields - Field routing
• Termination Guards - Type checking functions
• Termination Config - TerminationConfig type definitions
• Input With Tooltip - Field wrapper component
• Termination Conditions - Termination condition concepts