ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui/agents): make A2A skill tags enterable and validated (#29512)

Browse Source 
* fix(ui/agents): make A2A skill tags enterable and validated

Skill tags were marked required but rendered as a comma-split text input
that couldn't surface validation and let empty values save. Switch tags
and examples to Select tag inputs, drop the misleading "Required" skills
label (the API allows zero skills), and validate the full configure step
so an added skill must be complete before advancing.

Resolves LIT-3153

* fix(ui/agents): allow Enter to create skill tags/examples

Drop open={false} from the tags and examples Select inputs. With the
dropdown forced closed, AntD suppresses the "create from input" option,
so pressing Enter (as the placeholder instructs) did nothing. Matches the
existing extra_headers Select.
This commit is contained in:
ryan-crabbe-berri 2026-06-02 14:57:30 -07:00 committed by GitHub
parent ae7ac72331
commit d991c47018
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
View File

@ -197,7 +197,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
const handleNext = async () => {
try {
if (currentStep === 0) {
await form.validateFields(["agent_name"]);
await form.validateFields();
const agentName = form.getFieldValue("agent_name");
if (agentName && !newKeyName) {
setNewKeyName(`${agentName}-key`);

8
ui/litellm-dashboard/src/components/agents/agent_config.ts
View File

@ -212,14 +212,14 @@ export const SKILL_FIELD_CONFIG = {
},
tags: {
name: "tags",
label: "Tags (comma-separated)",
label: "Tags",
required: true,
placeholder: "e.g., hello world, greeting",
placeholder: "Type a tag and press Enter",
},
examples: {
name: "examples",
label: "Examples (comma-separated)",
placeholder: "e.g., hi, hello world",
label: "Examples",
placeholder: "Type an example and press Enter",
},
};

20
ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
View File

@ -56,7 +56,7 @@ const AgentFormFields: React.FC<AgentFormFieldsProps> = ({ showAgentName = true,
{/* Skills */}
{shouldShow(AGENT_FORM_CONFIG.skills.key) && (
<Panel header={`${AGENT_FORM_CONFIG.skills.title} (Required)`} key={AGENT_FORM_CONFIG.skills.key}>
<Panel header={`${AGENT_FORM_CONFIG.skills.title}`} key={AGENT_FORM_CONFIG.skills.key}>
<Form.List name="skills">
{(fields, { add, remove }) => (
<>
@ -94,20 +94,26 @@ const AgentFormFields: React.FC<AgentFormFieldsProps> = ({ showAgentName = true,
label={SKILL_FIELD_CONFIG.tags.label}
name={[field.name, 'tags']}
rules={[{ required: SKILL_FIELD_CONFIG.tags.required, message: 'Required' }]}
getValueFromEvent={(e) => e.target.value.split(',').map((s: string) => s.trim())}
getValueProps={(value) => ({ value: Array.isArray(value) ? value.join(', ') : value })}
>
<Input placeholder={SKILL_FIELD_CONFIG.tags.placeholder} />
<Select
mode="tags"
style={{ width: '100%' }}
tokenSeparators={[',']}
placeholder={SKILL_FIELD_CONFIG.tags.placeholder}
/>
</Form.Item>
<Form.Item
{...field}
label={SKILL_FIELD_CONFIG.examples.label}
name={[field.name, 'examples']}
getValueFromEvent={(e) => e.target.value.split(',').map((s: string) => s.trim()).filter((s: string) => s)}
getValueProps={(value) => ({ value: Array.isArray(value) ? value.join(', ') : '' })}
>
<Input placeholder={SKILL_FIELD_CONFIG.examples.placeholder} />
<Select
mode="tags"
style={{ width: '100%' }}
tokenSeparators={[',']}
placeholder={SKILL_FIELD_CONFIG.examples.placeholder}
/>
</Form.Item>
<AntButton