fix: regex validation not applied for custom text attributes in UI (#14110)

# Pull Request Template

## Description

This PR fixes multiple issues related to regex patterns and validation
for custom attributes.
1. Fixed regex patterns being double-escaped when saving from Add and
Edit flows
2. Fixed regex validation not being enforced in the widget pre-chat form
3. Minor UI improvements in the Add/Edit custom attribute dialog


Fixes
[CW-6625](https://linear.app/chatwoot/issue/CW-6625/bug-report-custom-attribute-regex-validation-not-working-in-ui),
https://github.com/chatwoot/chatwoot/issues/13771

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

**Before**
https://www.loom.com/share/14f1983a8bc84f9fabc3663afd83cd50

**After**
https://www.loom.com/share/867c0484741140c1944fcbd43914c9c0

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/shared/helpers/Validators.js

@@ -101,6 +101,22 @@ export const getRegexp = regexPatternValue => {
   );
 };
 
+/**
+ * Normalises a user-entered regex pattern into canonical `/source/flags` form.
+ * Strips `/.../flags` wrapping if the user included it, so `new RegExp` does
+ * not double-escape the slashes on save.
+ *
+ * @param {string} pattern - Raw pattern string from the form.
+ * @returns {?string} Canonical `/source/flags` string, or null when empty.
+ */
+export const normalizeRegexPattern = pattern => {
+  if (!pattern) return null;
+  const match = pattern.match(/^\/(.+)\/([gimsuy]*)$/);
+  const source = match ? match[1] : pattern;
+  const flags = match ? match[2] : '';
+  return new RegExp(source, flags).toString();
+};
+
 /**
  * Checks if a string is a valid slug (letters, numbers, hyphens only, no spaces or other symbols).
  * @param {string} value - The slug to validate.

app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js

@@ -9,6 +9,7 @@ import {
   isNumber,
   isDomain,
   getRegexp,
+  normalizeRegexPattern,
   isValidSlug,
 } from '../Validators';
 
@@ -155,6 +156,30 @@ describe('#getRegexp', () => {
   });
 });
 
+describe('#normalizeRegexPattern', () => {
+  it('returns null for empty values', () => {
+    expect(normalizeRegexPattern('')).toBeNull();
+    expect(normalizeRegexPattern(null)).toBeNull();
+    expect(normalizeRegexPattern(undefined)).toBeNull();
+  });
+
+  it('canonicalises a bare source', () => {
+    expect(normalizeRegexPattern('^[0-9]+$')).toBe('/^[0-9]+$/');
+  });
+
+  it('strips slash wrapping the user may include', () => {
+    expect(normalizeRegexPattern('/^[0-9]+$/')).toBe('/^[0-9]+$/');
+  });
+
+  it('preserves flags on wrapped input', () => {
+    expect(normalizeRegexPattern('/hello/gi')).toBe('/hello/gi');
+  });
+
+  it('throws for an invalid regex source', () => {
+    expect(() => normalizeRegexPattern('[')).toThrow();
+  });
+});
+
 describe('#isValidSlug', () => {
   it('should return true for valid slugs', () => {
     expect(isValidSlug('abc')).toEqual(true);