From 770c8106500c98b537015461ab77cfe2e0e7a649 Mon Sep 17 00:00:00 2001
From: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com>
Date: Mon, 23 Jun 2025 12:25:44 +0200
Subject: [PATCH] feat: add validation and error messages for agent name in
 AgentConfig and AgentPanel

---
 .../SidePanel/Agents/AgentConfig.tsx          | 37 +++++++++++++------
 .../SidePanel/Agents/AgentPanel.tsx           |  6 +++
 client/src/locales/en/translation.json        |  4 +-
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/AgentConfig.tsx b/client/src/components/SidePanel/Agents/AgentConfig.tsx
index ed483825b6..6007125b9e 100644
--- a/client/src/components/SidePanel/Agents/AgentConfig.tsx
+++ b/client/src/components/SidePanel/Agents/AgentConfig.tsx
@@ -39,7 +39,10 @@ export default function AgentConfig({
   const [showToolDialog, setShowToolDialog] = useState(false);
   const { actions, setAction, groupedTools: allTools, setActivePanel } = useAgentPanelContext();
 
-  const { control } = methods;
+  const {
+    control,
+    formState: { errors },
+  } = methods;
   const provider = useWatch({ control, name: 'provider' });
   const model = useWatch({ control, name: 'model' });
   const agent = useWatch({ control, name: 'agent' });
@@ -190,21 +193,33 @@ export default function AgentConfig({
           />
           <label className={labelClass} htmlFor="name">
             {localize('com_ui_name')}
+            <span className="text-red-500">*</span>
           </label>
           <Controller
             name="name"
+            rules={{ required: localize('com_ui_agent_name_is_required') }}
             control={control}
             render={({ field }) => (
-              <input
-                {...field}
-                value={field.value ?? ''}
-                maxLength={256}
-                className={inputClass}
-                id="name"
-                type="text"
-                placeholder={localize('com_agents_name_placeholder')}
-                aria-label="Agent name"
-              />
+              <>
+                <input
+                  {...field}
+                  value={field.value ?? ''}
+                  maxLength={256}
+                  className={inputClass}
+                  id="name"
+                  type="text"
+                  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
diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
index be13404784..98af426fcd 100644
--- a/client/src/components/SidePanel/Agents/AgentPanel.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -242,6 +242,12 @@ export default function AgentPanel({
           status: 'error',
         });
       }
+      if (!name) {
+        return showToast({
+          message: localize('com_agents_missing_name'),
+          status: 'error',
+        });
+      }
 
       create.mutate({
         name,
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index ccc2b48c72..a31813947b 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1215,5 +1215,7 @@
   "com_ui_unsaved_changes": "You have unsaved changes",
   "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_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."
 }