📬 feat: Agent Support Email Address Validation (#9128)

* fix: email-regex realtime updates and looser validation

* feat: add zod validation to email address input

* refactor: emailValidation to email

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -8,6 +8,7 @@ import {
   processAgentOption,
   getEndpointField,
   defaultTextProps,
+  validateEmail,
   getIconKey,
   cn,
 } from '~/utils';
@@ -445,10 +446,8 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
                 name="support_contact.email"
                 control={control}
                 rules={{
-                  pattern: {
+                  validate: (value) =>
-                    value: /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/,
+                    validateEmail(value ?? '', localize('com_ui_support_contact_email_invalid')),
-                    message: localize('com_ui_support_contact_email_invalid'),
-                  },
                 }}
                 render={({ field, fieldState: { error } }) => (
                   <>

client/src/components/SidePanel/Agents/AgentPanel.tsx

@@ -72,6 +72,7 @@ export default function AgentPanel() {
   const models = useMemo(() => modelsQuery.data ?? {}, [modelsQuery.data]);
   const methods = useForm<AgentForm>({
     defaultValues: getDefaultAgentFormValues(),
+    mode: 'onChange',
   });
 
   const { control, handleSubmit, reset } = methods;

client/src/components/SidePanel/Agents/MCPPanel.tsx

@@ -65,6 +65,7 @@ export default function MCPPanel() {
 
   const methods = useForm<MCPForm>({
     defaultValues: defaultMCPFormValues,
+    mode: 'onChange',
   });
 
   const { reset } = methods;

client/src/utils/email.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+/**
+ * Zod email validation schema
+ * Uses Zod's built-in email validation which is more robust than simple regex
+ * Based on: https://zod.dev/api?id=emails
+ */
+export const emailSchema = z.string().email();
+
+/**
+ * Validates an email address using Zod
+ * @param email - The email address to validate
+ * @param errorMessage - Optional custom error message (defaults to Zod's message)
+ * @returns true if valid, error message if invalid
+ */
+export const validateEmail = (email: string, errorMessage?: string): true | string => {
+  if (!email || email.trim() === '') {
+    return true;
+  }
+
+  const result = emailSchema.safeParse(email);
+  return (
+    result.success ||
+    errorMessage ||
+    result.error.errors[0]?.message ||
+    'Please enter a valid email address'
+  );
+};

client/src/utils/index.ts

@@ -18,6 +18,7 @@ export * from './resources';
 export * from './roles';
 export * from './localStorage';
 export * from './promptGroups';
+export * from './email';
 export { default as cn } from './cn';
 export { default as logger } from './logger';
 export { default as buildTree } from './buildTree';