feat: add validation and error messages for agent name in AgentConfig and AgentPanel

This commit is contained in:
Atef Bellaaj 2025-06-23 12:25:44 +02:00 committed by Danny Avila
parent bfeb7bfdd3
commit 8ea2329cff
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
3 changed files with 35 additions and 12 deletions

View file

@ -39,7 +39,10 @@ export default function AgentConfig({
const [showToolDialog, setShowToolDialog] = useState(false); const [showToolDialog, setShowToolDialog] = useState(false);
const { actions, setAction, groupedTools: allTools, setActivePanel } = useAgentPanelContext(); const { actions, setAction, groupedTools: allTools, setActivePanel } = useAgentPanelContext();
const { control } = methods; const {
control,
formState: { errors },
} = methods;
const provider = useWatch({ control, name: 'provider' }); const provider = useWatch({ control, name: 'provider' });
const model = useWatch({ control, name: 'model' }); const model = useWatch({ control, name: 'model' });
const agent = useWatch({ control, name: 'agent' }); const agent = useWatch({ control, name: 'agent' });
@ -190,21 +193,33 @@ export default function AgentConfig({
/> />
<label className={labelClass} htmlFor="name"> <label className={labelClass} htmlFor="name">
{localize('com_ui_name')} {localize('com_ui_name')}
<span className="text-red-500">*</span>
</label> </label>
<Controller <Controller
name="name" name="name"
rules={{ required: localize('com_ui_agent_name_is_required') }}
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<input <>
{...field} <input
value={field.value ?? ''} {...field}
maxLength={256} value={field.value ?? ''}
className={inputClass} maxLength={256}
id="name" className={inputClass}
type="text" id="name"
placeholder={localize('com_agents_name_placeholder')} type="text"
aria-label="Agent name" placeholder={localize('com_agents_name_placeholder')}
/> aria-label="Agent name"
/>
<div
className={cn(
'mt-1 w-56 text-sm text-red-500',
errors.name ? 'visible h-auto' : 'invisible h-0',
)}
>
{errors.name ? errors.name.message : ' '}
</div>
</>
)} )}
/> />
<Controller <Controller

View file

@ -242,6 +242,12 @@ export default function AgentPanel({
status: 'error', status: 'error',
}); });
} }
if (!name) {
return showToast({
message: localize('com_agents_missing_name'),
status: 'error',
});
}
create.mutate({ create.mutate({
name, name,

View file

@ -1211,5 +1211,7 @@
"com_ui_unsaved_changes": "You have unsaved changes", "com_ui_unsaved_changes": "You have unsaved changes",
"com_ui_share_with_everyone": "Share with everyone", "com_ui_share_with_everyone": "Share with everyone",
"com_ui_make_agent_available_all_users": "Make this agent available to all LibreChat users", "com_ui_make_agent_available_all_users": "Make this agent available to all LibreChat users",
"com_ui_public_access_level": "Public access level" "com_ui_public_access_level": "Public access level",
"com_ui_agent_name_is_required": "Agent name is required",
"com_agents_missing_name": "Please type in a name before creating an agent."
} }