@uipath/apollo-react 6.62.0 → 6.64.0

package/dist/canvas/components/Guardrails/guardrail-builder.cjs

@@ -33,14 +33,26 @@ const external_react_namespaceObject = require("react");
 const external_builder_types_cjs_namespaceObject = require("./builder-types.cjs");
 const external_builder_utils_cjs_namespaceObject = require("./builder-utils.cjs");
 const guardrail_action_section_cjs_namespaceObject = require("./components/guardrail-action-section.cjs");
+const guardrail_evals_toggle_cjs_namespaceObject = require("./components/guardrail-evals-toggle.cjs");
+const guardrail_name_fields_cjs_namespaceObject = require("./components/guardrail-name-fields.cjs");
 const guardrail_scope_selector_cjs_namespaceObject = require("./components/guardrail-scope-selector.cjs");
 const guardrail_status_banner_cjs_namespaceObject = require("./components/guardrail-status-banner.cjs");
 const mixed_scopes_banner_cjs_namespaceObject = require("./components/mixed-scopes-banner.cjs");
 const external_guardrail_form_layout_cjs_namespaceObject = require("./guardrail-form-layout.cjs");
 const external_guardrail_validator_form_cjs_namespaceObject = require("./guardrail-validator-form.cjs");
 const external_i18n_cjs_namespaceObject = require("./i18n.cjs");
+const external_use_guardrail_form_errors_cjs_namespaceObject = require("./use-guardrail-form-errors.cjs");
+const external_use_swallow_enter_cjs_namespaceObject = require("./use-swallow-enter.cjs");
 const external_utils_cjs_namespaceObject = require("./utils.cjs");
 const EMPTY_PARAM_IDS = new Set();
+const BUILDER_ERROR_MERGES = {
+    parameters: {
+        merge: (internal, host)=>({
+                ...internal,
+                ...host
+            })
+    }
+};
 function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, existingNames, toolName, availableToolNames, onSave, onCancel, onSaveAsNew, otherAppliedScopes = null, inline = false, hideHeader = false, dialogMaxWidth, title, evalsTogglePlacement = 'form', renderRecipientSearch, renderStaticRecipient, renderAppPicker, escalateHelp, errors: hostErrors, renderParameter, overrideParameterIds, saveDisabled: hostSaveDisabled = false, labels: labelOverrides, className }) {
     const labels = (0, external_i18n_cjs_namespaceObject.useGuardrailBuilderLabels)(labelOverrides);
     const uid = (0, external_react_namespaceObject.useId)();
@@ -49,7 +61,6 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
         if (!guardrail && defaultName) data.name = defaultName;
         return data;
     });
-    const [showErrors, setShowErrors] = (0, external_react_namespaceObject.useState)(false);
     const [editedParamIds, setEditedParamIds] = (0, external_react_namespaceObject.useState)(EMPTY_PARAM_IDS);
     (0, external_react_namespaceObject.useEffect)(()=>{
         setEditedParamIds(EMPTY_PARAM_IDS);
@@ -57,17 +68,7 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
         hostErrors
     ]);
     const rootRef = (0, external_react_namespaceObject.useRef)(null);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        const node = rootRef.current;
-        if (!node) return;
-        const swallowEnter = (event)=>{
-            if ('Enter' !== event.key || event.defaultPrevented) return;
-            const target = event.target;
-            if (target instanceof HTMLInputElement && 'button' !== target.type) event.preventDefault();
-        };
-        node.addEventListener('keydown', swallowEnter);
-        return ()=>node.removeEventListener('keydown', swallowEnter);
-    }, []);
+    (0, external_use_swallow_enter_cjs_namespaceObject.useSwallowEnter)(rootRef);
     const showScopeSelector = 'Agent' === scope;
     const updateField = (0, external_react_namespaceObject.useCallback)((field, value)=>{
         setFormData((prev)=>({
@@ -137,50 +138,37 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
         hostErrors,
         editedParamIds
     ]);
-    const displayErrors = (0, external_react_namespaceObject.useMemo)(()=>{
-        const base = showErrors ? {
-            ...internalErrors
-        } : {};
-        if (hostErrors) {
-            for (const [key, value] of Object.entries(hostErrors))if (void 0 !== value) base[key] = 'parameters' === key ? {
-                ...base.parameters,
-                ...liveHostParameterErrors
-            } : value;
-        }
-        return base;
-    }, [
-        showErrors,
-        internalErrors,
+    const liveHostErrors = (0, external_react_namespaceObject.useMemo)(()=>hostErrors?.parameters === void 0 ? hostErrors : {
+            ...hostErrors,
+            parameters: liveHostParameterErrors
+        }, [
         hostErrors,
         liveHostParameterErrors
     ]);
-    const hasHostErrors = Boolean(hostErrors && Object.entries(hostErrors).some(([key, v])=>{
-        if (void 0 === v) return false;
-        if ('parameters' === key) return Object.keys(liveHostParameterErrors).length > 0;
-        return 'object' != typeof v || Object.keys(v).length > 0;
-    }));
-    const isValid = 0 === Object.keys(internalErrors).length && !hasHostErrors;
+    const { displayErrors, isValid, showErrors, revealErrors } = (0, external_use_guardrail_form_errors_cjs_namespaceObject.useGuardrailFormErrors)(internalErrors, liveHostErrors, BUILDER_ERROR_MERGES);
     const isDefinitionAvailable = 'Available' === definition.status;
     const handleSave = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!isDefinitionAvailable) return;
-        if (!isValid) return void setShowErrors(true);
+        if (!isValid) return void revealErrors();
         onSave(guardrailResult);
     }, [
         guardrailResult,
         onSave,
         isValid,
-        isDefinitionAvailable
+        isDefinitionAvailable,
+        revealErrors
     ]);
     const handleSaveAsNew = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!onSaveAsNew) return;
         if (!isDefinitionAvailable) return;
-        if (!isValid) return void setShowErrors(true);
+        if (!isValid) return void revealErrors();
         onSaveAsNew(guardrailResult);
     }, [
         guardrailResult,
         onSaveAsNew,
         isValid,
-        isDefinitionAvailable
+        isDefinitionAvailable,
+        revealErrors
     ]);
     const isByoConfigurationDisabled = void 0 !== definition.byoValidatorName && 'Disabled' === definition.status;
     const computedTitle = guardrail ? (0, external_i18n_cjs_namespaceObject.formatGuardrailFormMessage)(labels.editTitle, {
@@ -208,25 +196,11 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
             })
         ]
     }) : null;
-    const evalsToggle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "flex items-center gap-2",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Switch, {
-                id: `${uid}-ootb-enable-evals`,
-                checked: formData.enabledForEvals,
-                onCheckedChange: (checked)=>updateField('enabledForEvals', checked)
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
-                variant: "muted",
-                htmlFor: `${uid}-ootb-enable-evals`,
-                className: "cursor-pointer",
-                children: labels.evalsLabel
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.InfoTooltip, {
-                content: labels.evalsTooltip,
-                "aria-label": labels.evalsInfoAriaLabel
-            })
-        ]
+    const evalsToggle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(guardrail_evals_toggle_cjs_namespaceObject.GuardrailEvalsToggle, {
+        idPrefix: `${uid}-ootb`,
+        checked: formData.enabledForEvals,
+        onCheckedChange: (checked)=>updateField('enabledForEvals', checked),
+        labels: labels
     });
     const validatorFormErrors = displayErrors.parameters;
     const formBody = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -250,36 +224,14 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
-                        htmlFor: `${uid}-ootb-name`,
-                        required: true,
-                        children: labels.nameLabel
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
-                        id: `${uid}-ootb-name`,
-                        value: formData.name,
-                        onChange: (e)=>updateField('name', e.target.value),
-                        placeholder: labels.namePlaceholder,
-                        error: displayErrors.name
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
-                        htmlFor: `${uid}-ootb-description`,
-                        children: labels.descriptionLabel
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Textarea, {
-                        id: `${uid}-ootb-description`,
-                        minRows: 1,
-                        value: formData.description,
-                        onChange: (e)=>updateField("description", e.target.value),
-                        placeholder: labels.descriptionPlaceholder
-                    })
-                ]
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(guardrail_name_fields_cjs_namespaceObject.GuardrailNameFields, {
+                idPrefix: `${uid}-ootb`,
+                name: formData.name,
+                description: formData.description,
+                onNameChange: (name)=>updateField('name', name),
+                onDescriptionChange: (description)=>updateField("description", description),
+                nameError: displayErrors.name,
+                labels: labels
             }),
             definition.parameters.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "space-y-3",

package/dist/canvas/components/Guardrails/guardrail-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guardrail-builder.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Guardrails/guardrail-builder.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAA4D,MAAM,OAAO,CAAC;AACjG,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,+BAA+B,EACpC,KAAK,cAAc,EAEnB,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAazB,OAAO,EAEL,KAAK,sBAAsB,EAE5B,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAU3D,MAAM,WAAW,qBAAqB;IAKpC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAEhC,KAAK,EAAE,cAAc,CAAC;IAEtB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAElC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,MAAM,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;IAYrB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEzD,kBAAkB,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI,CAAC;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,oBAAoB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAK5E,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,GAAG,SAAS,CAAC;IACxF,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,SAAS,CAAC;IAEhE,YAAY,CAAC,EAAE,SAAS,CAAC;IAKzB,MAAM,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAKzC,eAAe,CAAC,EAAE,2BAA2B,CAAC,iBAAiB,CAAC,CAAC;IAMjE,oBAAoB,CAAC,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,CAAC;IAK3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,kBAAyB,EACzB,MAAc,EACd,UAAkB,EAClB,cAAc,EACd,KAAK,EACL,oBAA6B,EAC7B,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,YAAY,EACZ,MAAM,EAAE,UAAU,EAClB,eAAe,EACf,oBAAoB,EACpB,YAAY,EAAE,gBAAwB,EACtC,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,qBAAqB,2CA8XvB;yBA1Ze,gBAAgB"}
+{"version":3,"file":"guardrail-builder.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Guardrails/guardrail-builder.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAA4D,MAAM,OAAO,CAAC;AACjG,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,+BAA+B,EACpC,KAAK,cAAc,EAEnB,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAezB,OAAO,EAEL,KAAK,sBAAsB,EAE5B,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAiB3D,MAAM,WAAW,qBAAqB;IAKpC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAEhC,KAAK,EAAE,cAAc,CAAC;IAEtB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAElC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,MAAM,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;IAYrB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEzD,kBAAkB,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI,CAAC;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,oBAAoB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAK5E,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,GAAG,SAAS,CAAC;IACxF,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,SAAS,CAAC;IAEhE,YAAY,CAAC,EAAE,SAAS,CAAC;IAKzB,MAAM,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAKzC,eAAe,CAAC,EAAE,2BAA2B,CAAC,iBAAiB,CAAC,CAAC;IAMjE,oBAAoB,CAAC,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,CAAC;IAK3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,kBAAyB,EACzB,MAAc,EACd,UAAkB,EAClB,cAAc,EACd,KAAK,EACL,oBAA6B,EAC7B,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,YAAY,EACZ,MAAM,EAAE,UAAU,EAClB,eAAe,EACf,oBAAoB,EACpB,YAAY,EAAE,gBAAwB,EACtC,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,qBAAqB,2CA0UvB;yBAtWe,gBAAgB"}

package/dist/canvas/components/Guardrails/guardrail-builder.js

@@ -1,18 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert, AlertDescription, FormField, FormFieldLabel, InfoTooltip, Input, Label, Separator, Switch, Textarea, cn } from "@uipath/apollo-wind";
+import { Alert, AlertDescription, FormField, Input, Label, Separator, cn } from "@uipath/apollo-wind";
 import { Info } from "lucide-react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { GUARDRAIL_BYO_VALIDATOR_TYPE } from "./builder-types.js";
 import { getGuardrailActionErrorFields, getGuardrailSelectorErrorFields, initGuardrailBuilderFormData } from "./builder-utils.js";
 import { GuardrailActionSection } from "./components/guardrail-action-section.js";
+import { GuardrailEvalsToggle } from "./components/guardrail-evals-toggle.js";
+import { GuardrailNameFields } from "./components/guardrail-name-fields.js";
 import { GuardrailScopeSelector } from "./components/guardrail-scope-selector.js";
 import { GuardrailStatusBanner } from "./components/guardrail-status-banner.js";
 import { MixedScopesBanner } from "./components/mixed-scopes-banner.js";
 import { GuardrailFormLayout } from "./guardrail-form-layout.js";
 import { GuardrailValidatorForm } from "./guardrail-validator-form.js";
 import { formatGuardrailFormMessage, useGuardrailBuilderLabels } from "./i18n.js";
+import { useGuardrailFormErrors } from "./use-guardrail-form-errors.js";
+import { useSwallowEnter } from "./use-swallow-enter.js";
 import { dropEmptyOptionalParameters, getOutOfRangeParameterIds, getRequiredEmptyParameterIds, syncMapEnumParameters } from "./utils.js";
 const EMPTY_PARAM_IDS = new Set();
+const BUILDER_ERROR_MERGES = {
+    parameters: {
+        merge: (internal, host)=>({
+                ...internal,
+                ...host
+            })
+    }
+};
 function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, existingNames, toolName, availableToolNames, onSave, onCancel, onSaveAsNew, otherAppliedScopes = null, inline = false, hideHeader = false, dialogMaxWidth, title, evalsTogglePlacement = 'form', renderRecipientSearch, renderStaticRecipient, renderAppPicker, escalateHelp, errors: hostErrors, renderParameter, overrideParameterIds, saveDisabled: hostSaveDisabled = false, labels: labelOverrides, className }) {
     const labels = useGuardrailBuilderLabels(labelOverrides);
     const uid = useId();
@@ -21,7 +33,6 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
         if (!guardrail && defaultName) data.name = defaultName;
         return data;
     });
-    const [showErrors, setShowErrors] = useState(false);
     const [editedParamIds, setEditedParamIds] = useState(EMPTY_PARAM_IDS);
     useEffect(()=>{
         setEditedParamIds(EMPTY_PARAM_IDS);
@@ -29,17 +40,7 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
         hostErrors
     ]);
     const rootRef = useRef(null);
-    useEffect(()=>{
-        const node = rootRef.current;
-        if (!node) return;
-        const swallowEnter = (event)=>{
-            if ('Enter' !== event.key || event.defaultPrevented) return;
-            const target = event.target;
-            if (target instanceof HTMLInputElement && 'button' !== target.type) event.preventDefault();
-        };
-        node.addEventListener('keydown', swallowEnter);
-        return ()=>node.removeEventListener('keydown', swallowEnter);
-    }, []);
+    useSwallowEnter(rootRef);
     const showScopeSelector = 'Agent' === scope;
     const updateField = useCallback((field, value)=>{
         setFormData((prev)=>({
@@ -109,50 +110,37 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
         hostErrors,
         editedParamIds
     ]);
-    const displayErrors = useMemo(()=>{
-        const base = showErrors ? {
-            ...internalErrors
-        } : {};
-        if (hostErrors) {
-            for (const [key, value] of Object.entries(hostErrors))if (void 0 !== value) base[key] = 'parameters' === key ? {
-                ...base.parameters,
-                ...liveHostParameterErrors
-            } : value;
-        }
-        return base;
-    }, [
-        showErrors,
-        internalErrors,
+    const liveHostErrors = useMemo(()=>hostErrors?.parameters === void 0 ? hostErrors : {
+            ...hostErrors,
+            parameters: liveHostParameterErrors
+        }, [
         hostErrors,
         liveHostParameterErrors
     ]);
-    const hasHostErrors = Boolean(hostErrors && Object.entries(hostErrors).some(([key, v])=>{
-        if (void 0 === v) return false;
-        if ('parameters' === key) return Object.keys(liveHostParameterErrors).length > 0;
-        return 'object' != typeof v || Object.keys(v).length > 0;
-    }));
-    const isValid = 0 === Object.keys(internalErrors).length && !hasHostErrors;
+    const { displayErrors, isValid, showErrors, revealErrors } = useGuardrailFormErrors(internalErrors, liveHostErrors, BUILDER_ERROR_MERGES);
     const isDefinitionAvailable = 'Available' === definition.status;
     const handleSave = useCallback(()=>{
         if (!isDefinitionAvailable) return;
-        if (!isValid) return void setShowErrors(true);
+        if (!isValid) return void revealErrors();
         onSave(guardrailResult);
     }, [
         guardrailResult,
         onSave,
         isValid,
-        isDefinitionAvailable
+        isDefinitionAvailable,
+        revealErrors
     ]);
     const handleSaveAsNew = useCallback(()=>{
         if (!onSaveAsNew) return;
         if (!isDefinitionAvailable) return;
-        if (!isValid) return void setShowErrors(true);
+        if (!isValid) return void revealErrors();
         onSaveAsNew(guardrailResult);
     }, [
         guardrailResult,
         onSaveAsNew,
         isValid,
-        isDefinitionAvailable
+        isDefinitionAvailable,
+        revealErrors
     ]);
     const isByoConfigurationDisabled = void 0 !== definition.byoValidatorName && 'Disabled' === definition.status;
     const computedTitle = guardrail ? formatGuardrailFormMessage(labels.editTitle, {
@@ -180,25 +168,11 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
             })
         ]
     }) : null;
-    const evalsToggle = /*#__PURE__*/ jsxs("div", {
-        className: "flex items-center gap-2",
-        children: [
-            /*#__PURE__*/ jsx(Switch, {
-                id: `${uid}-ootb-enable-evals`,
-                checked: formData.enabledForEvals,
-                onCheckedChange: (checked)=>updateField('enabledForEvals', checked)
-            }),
-            /*#__PURE__*/ jsx(Label, {
-                variant: "muted",
-                htmlFor: `${uid}-ootb-enable-evals`,
-                className: "cursor-pointer",
-                children: labels.evalsLabel
-            }),
-            /*#__PURE__*/ jsx(InfoTooltip, {
-                content: labels.evalsTooltip,
-                "aria-label": labels.evalsInfoAriaLabel
-            })
-        ]
+    const evalsToggle = /*#__PURE__*/ jsx(GuardrailEvalsToggle, {
+        idPrefix: `${uid}-ootb`,
+        checked: formData.enabledForEvals,
+        onCheckedChange: (checked)=>updateField('enabledForEvals', checked),
+        labels: labels
     });
     const validatorFormErrors = displayErrors.parameters;
     const formBody = /*#__PURE__*/ jsxs("div", {
@@ -222,36 +196,14 @@ function GuardrailBuilder({ open, definition, scope, guardrail, defaultName, exi
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: `${uid}-ootb-name`,
-                        required: true,
-                        children: labels.nameLabel
-                    }),
-                    /*#__PURE__*/ jsx(Input, {
-                        id: `${uid}-ootb-name`,
-                        value: formData.name,
-                        onChange: (e)=>updateField('name', e.target.value),
-                        placeholder: labels.namePlaceholder,
-                        error: displayErrors.name
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(Label, {
-                        htmlFor: `${uid}-ootb-description`,
-                        children: labels.descriptionLabel
-                    }),
-                    /*#__PURE__*/ jsx(Textarea, {
-                        id: `${uid}-ootb-description`,
-                        minRows: 1,
-                        value: formData.description,
-                        onChange: (e)=>updateField("description", e.target.value),
-                        placeholder: labels.descriptionPlaceholder
-                    })
-                ]
+            /*#__PURE__*/ jsx(GuardrailNameFields, {
+                idPrefix: `${uid}-ootb`,
+                name: formData.name,
+                description: formData.description,
+                onNameChange: (name)=>updateField('name', name),
+                onDescriptionChange: (description)=>updateField("description", description),
+                nameError: displayErrors.name,
+                labels: labels
             }),
             definition.parameters.length > 0 && /*#__PURE__*/ jsx("div", {
                 className: "space-y-3",

package/dist/canvas/components/Guardrails/i18n.cjs

@@ -26,15 +26,18 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     GUARDRAIL_BUILDER_EN_LABELS: ()=>GUARDRAIL_BUILDER_EN_LABELS,
     GUARDRAIL_FORM_EN_LABELS: ()=>GUARDRAIL_FORM_EN_LABELS,
-    resolveGuardrailListLabels: ()=>resolveGuardrailListLabels,
+    resolveGuardrailPaletteLabels: ()=>resolveGuardrailPaletteLabels,
+    useGuardrailPaletteLabels: ()=>useGuardrailPaletteLabels,
     resolveGuardrailScopeSelectorLabels: ()=>resolveGuardrailScopeSelectorLabels,
     GUARDRAIL_ACTION_EN_LABELS: ()=>GUARDRAIL_ACTION_EN_LABELS,
+    CUSTOM_GUARDRAIL_BUILDER_EN_MESSAGES: ()=>CUSTOM_GUARDRAIL_BUILDER_EN_MESSAGES,
     GUARDRAIL_RULES_EN_MESSAGES: ()=>GUARDRAIL_RULES_EN_MESSAGES,
     GUARDRAIL_SCOPE_SELECTOR_EN_LABELS: ()=>GUARDRAIL_SCOPE_SELECTOR_EN_LABELS,
     useGuardrailFilterFieldSelectorLabels: ()=>useGuardrailFilterFieldSelectorLabels,
     resolveCentralizedGuardrailsLabels: ()=>resolveCentralizedGuardrailsLabels,
     GUARDRAIL_LIST_EN_MESSAGES: ()=>GUARDRAIL_LIST_EN_MESSAGES,
     GUARDRAIL_RULES_EN_LABELS: ()=>GUARDRAIL_RULES_EN_LABELS,
+    CUSTOM_GUARDRAIL_BUILDER_EN_LABELS: ()=>CUSTOM_GUARDRAIL_BUILDER_EN_LABELS,
     resolveGuardrailFormLabels: ()=>resolveGuardrailFormLabels,
     resolveGuardrailRemoveDialogLabels: ()=>resolveGuardrailRemoveDialogLabels,
     resolveGuardrailActionLabels: ()=>resolveGuardrailActionLabels,
@@ -46,6 +49,7 @@ __webpack_require__.d(__webpack_exports__, {
     GUARDRAIL_ACTION_LABEL_KEYS: ()=>GUARDRAIL_ACTION_LABEL_KEYS,
     GUARDRAIL_FILTER_FIELD_SELECTOR_EN_LABELS: ()=>GUARDRAIL_FILTER_FIELD_SELECTOR_EN_LABELS,
     useGuardrailRulesLabels: ()=>useGuardrailRulesLabels,
+    CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS: ()=>CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS,
     resolveGuardrailRulesLabels: ()=>resolveGuardrailRulesLabels,
     GUARDRAIL_SCOPE_SELECTOR_LABEL_KEYS: ()=>GUARDRAIL_SCOPE_SELECTOR_LABEL_KEYS,
     useGuardrailScopeSelectorLabels: ()=>useGuardrailScopeSelectorLabels,
@@ -55,14 +59,15 @@ __webpack_require__.d(__webpack_exports__, {
     useCentralizedGuardrailsLabels: ()=>useCentralizedGuardrailsLabels,
     GUARDRAIL_LIST_EN_LABELS: ()=>GUARDRAIL_LIST_EN_LABELS,
     useGuardrailRemoveDialogLabels: ()=>useGuardrailRemoveDialogLabels,
-    useGuardrailFormLabels: ()=>useGuardrailFormLabels,
+    resolveCustomGuardrailBuilderLabels: ()=>resolveCustomGuardrailBuilderLabels,
     GUARDRAIL_PALETTE_EN_LABELS: ()=>GUARDRAIL_PALETTE_EN_LABELS,
-    useGuardrailPaletteLabels: ()=>useGuardrailPaletteLabels,
+    useCustomGuardrailBuilderLabels: ()=>useCustomGuardrailBuilderLabels,
     resolveGuardrailFilterFieldSelectorLabels: ()=>resolveGuardrailFilterFieldSelectorLabels,
     useGuardrailBuilderLabels: ()=>useGuardrailBuilderLabels,
+    useGuardrailFormLabels: ()=>useGuardrailFormLabels,
     formatGuardrailFormMessage: ()=>formatGuardrailFormMessage,
     useGuardrailListLabels: ()=>useGuardrailListLabels,
-    resolveGuardrailPaletteLabels: ()=>resolveGuardrailPaletteLabels
+    resolveGuardrailListLabels: ()=>resolveGuardrailListLabels
 });
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
@@ -150,6 +155,11 @@ function mergeLabels(defaults, catalog, overrides) {
 function resolveGuardrailBuilderLabels(catalog, overrides) {
     return mergeLabels(GUARDRAIL_BUILDER_EN_LABELS, catalog, overrides);
 }
+function pickGuardrailBuilderLabels(source, keys) {
+    const picked = {};
+    for (const key of keys)picked[key] = source[key];
+    return picked;
+}
 const GUARDRAIL_ACTION_LABEL_KEYS = [
     'actionTypeLabel',
     'actionLogLabel',
@@ -175,12 +185,7 @@ const GUARDRAIL_ACTION_LABEL_KEYS = [
     'actionAppLabel',
     'appPickerUnavailable'
 ];
-function pickGuardrailActionLabels(source) {
-    const picked = {};
-    for (const key of GUARDRAIL_ACTION_LABEL_KEYS)picked[key] = source[key];
-    return picked;
-}
-const GUARDRAIL_ACTION_EN_LABELS = pickGuardrailActionLabels(GUARDRAIL_BUILDER_EN_LABELS);
+const GUARDRAIL_ACTION_EN_LABELS = pickGuardrailBuilderLabels(GUARDRAIL_BUILDER_EN_LABELS, GUARDRAIL_ACTION_LABEL_KEYS);
 function resolveGuardrailActionLabels(catalog, overrides) {
     return mergeLabels(GUARDRAIL_ACTION_EN_LABELS, catalog, overrides);
 }
@@ -198,7 +203,8 @@ const TEMPLATE_TOKENS = {
     max: '{{max}}',
     toolName: '{{toolName}}',
     policyName: '{{policyName}}',
-    count: '{{count}}'
+    count: '{{count}}',
+    docsLink: '{{docsLink}}'
 };
 function useGuardrailFormLabels(overrides) {
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
@@ -479,7 +485,7 @@ function useGuardrailBuilderLabels(overrides) {
 }
 function useGuardrailActionLabels(overrides) {
     const catalog = useGuardrailBuilderLabels();
-    return (0, external_react_namespaceObject.useMemo)(()=>resolveGuardrailActionLabels(pickGuardrailActionLabels(catalog), overrides), [
+    return (0, external_react_namespaceObject.useMemo)(()=>resolveGuardrailActionLabels(pickGuardrailBuilderLabels(catalog, GUARDRAIL_ACTION_LABEL_KEYS), overrides), [
         catalog,
         overrides
     ]);
@@ -1115,11 +1121,6 @@ function useCentralizedGuardrailsLabels(overrides) {
         overrides
     ]);
 }
-function pickGuardrailBuilderLabels(source, keys) {
-    const picked = {};
-    for (const key of keys)picked[key] = source[key];
-    return picked;
-}
 const GUARDRAIL_SCOPE_SELECTOR_LABEL_KEYS = [
     'scopesLabel',
     'toolsLabel',
@@ -1138,8 +1139,104 @@ function useGuardrailScopeSelectorLabels(overrides) {
         overrides
     ]);
 }
+const CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS = [
+    'nameLabel',
+    'namePlaceholder',
+    "descriptionLabel",
+    "descriptionPlaceholder",
+    'evalsLabel',
+    'evalsInfoAriaLabel',
+    'evalsTooltip',
+    'saveAsNew',
+    'cancel',
+    'save',
+    'mixedScopesAlsoApplied',
+    'mixedScopesSaveAsNewHint',
+    'nameRequiredError',
+    'nameDuplicateError',
+    'blockReasonRequiredError',
+    'filterFieldsRequiredError',
+    'recipientRequiredError',
+    'actionAppRequiredError'
+];
+function buildCustomGuardrailBuilderLabels(_) {
+    return {
+        addTitle: _({
+            id: 'guardrails.custom-builder.add-title',
+            message: 'Add custom guardrail'
+        }),
+        editTitle: _({
+            id: 'guardrails.custom-builder.edit-title',
+            message: 'Edit custom guardrail'
+        }),
+        helpText: _({
+            id: 'guardrails.custom-builder.help-text',
+            message: 'Guardrail is a collection of rules and action that should happen when all of the rules are met.'
+        }),
+        helpDocs: _({
+            id: 'guardrails.custom-builder.help-docs',
+            message: 'Learn more about Guardrail rules and actions {docsLink}',
+            values: TEMPLATE_TOKENS
+        }),
+        docsLink: _({
+            id: 'guardrails.custom-builder.docs-link',
+            message: 'here'
+        }),
+        rulesRequiredError: _({
+            id: 'guardrails.custom-builder.rules-required-error',
+            message: 'At least one rule is required'
+        }),
+        rulesInvalidError: _({
+            id: 'guardrails.custom-builder.rules-invalid-error',
+            message: 'One or more rules are invalid'
+        }),
+        rulesAlwaysCombinedError: _({
+            id: 'guardrails.custom-builder.rules-always-combined-error',
+            message: "You cannot combine an 'Always enforce guardrail' with any other rule type"
+        }),
+        ruleFieldsRequiredError: _({
+            id: 'guardrails.custom-builder.rule-fields-required-error',
+            message: 'Fields selection is required'
+        }),
+        ruleValueRequiredError: _({
+            id: 'guardrails.custom-builder.rule-value-required-error',
+            message: 'Value is required'
+        })
+    };
+}
+const englishCustomGuardrailBuilderTranslate = ({ message, values })=>values ? message.replace(/\{(\w+)\}/g, (match, token)=>values[token] ?? match) : message;
+const CUSTOM_GUARDRAIL_BUILDER_EN_LABELS = {
+    ...pickGuardrailBuilderLabels(GUARDRAIL_BUILDER_EN_LABELS, CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS),
+    ...buildCustomGuardrailBuilderLabels(englishCustomGuardrailBuilderTranslate)
+};
+const CUSTOM_GUARDRAIL_BUILDER_EN_MESSAGES = Object.freeze((()=>{
+    const messages = {};
+    buildCustomGuardrailBuilderLabels((descriptor)=>{
+        messages[descriptor.id] = descriptor.message;
+        return descriptor.message;
+    });
+    return messages;
+})());
+function resolveCustomGuardrailBuilderLabels(catalog, overrides) {
+    return mergeLabels(CUSTOM_GUARDRAIL_BUILDER_EN_LABELS, catalog, overrides);
+}
+function useCustomGuardrailBuilderLabels(overrides) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const builder = useGuardrailBuilderLabels();
+    return (0, external_react_namespaceObject.useMemo)(()=>resolveCustomGuardrailBuilderLabels({
+            ...pickGuardrailBuilderLabels(builder, CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS),
+            ...buildCustomGuardrailBuilderLabels(_)
+        }, overrides), [
+        _,
+        builder,
+        overrides
+    ]);
+}
 exports.CENTRALIZED_GUARDRAILS_EN_LABELS = __webpack_exports__.CENTRALIZED_GUARDRAILS_EN_LABELS;
 exports.CENTRALIZED_GUARDRAILS_EN_MESSAGES = __webpack_exports__.CENTRALIZED_GUARDRAILS_EN_MESSAGES;
+exports.CUSTOM_GUARDRAIL_BUILDER_EN_LABELS = __webpack_exports__.CUSTOM_GUARDRAIL_BUILDER_EN_LABELS;
+exports.CUSTOM_GUARDRAIL_BUILDER_EN_MESSAGES = __webpack_exports__.CUSTOM_GUARDRAIL_BUILDER_EN_MESSAGES;
+exports.CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS = __webpack_exports__.CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS;
 exports.GUARDRAIL_ACTION_EN_LABELS = __webpack_exports__.GUARDRAIL_ACTION_EN_LABELS;
 exports.GUARDRAIL_ACTION_LABEL_KEYS = __webpack_exports__.GUARDRAIL_ACTION_LABEL_KEYS;
 exports.GUARDRAIL_BUILDER_EN_LABELS = __webpack_exports__.GUARDRAIL_BUILDER_EN_LABELS;
@@ -1158,6 +1255,7 @@ exports.GUARDRAIL_SCOPE_SELECTOR_EN_LABELS = __webpack_exports__.GUARDRAIL_SCOPE
 exports.GUARDRAIL_SCOPE_SELECTOR_LABEL_KEYS = __webpack_exports__.GUARDRAIL_SCOPE_SELECTOR_LABEL_KEYS;
 exports.formatGuardrailFormMessage = __webpack_exports__.formatGuardrailFormMessage;
 exports.resolveCentralizedGuardrailsLabels = __webpack_exports__.resolveCentralizedGuardrailsLabels;
+exports.resolveCustomGuardrailBuilderLabels = __webpack_exports__.resolveCustomGuardrailBuilderLabels;
 exports.resolveGuardrailActionLabels = __webpack_exports__.resolveGuardrailActionLabels;
 exports.resolveGuardrailBuilderLabels = __webpack_exports__.resolveGuardrailBuilderLabels;
 exports.resolveGuardrailFilterFieldSelectorLabels = __webpack_exports__.resolveGuardrailFilterFieldSelectorLabels;
@@ -1168,6 +1266,7 @@ exports.resolveGuardrailRemoveDialogLabels = __webpack_exports__.resolveGuardrai
 exports.resolveGuardrailRulesLabels = __webpack_exports__.resolveGuardrailRulesLabels;
 exports.resolveGuardrailScopeSelectorLabels = __webpack_exports__.resolveGuardrailScopeSelectorLabels;
 exports.useCentralizedGuardrailsLabels = __webpack_exports__.useCentralizedGuardrailsLabels;
+exports.useCustomGuardrailBuilderLabels = __webpack_exports__.useCustomGuardrailBuilderLabels;
 exports.useGuardrailActionLabels = __webpack_exports__.useGuardrailActionLabels;
 exports.useGuardrailBuilderLabels = __webpack_exports__.useGuardrailBuilderLabels;
 exports.useGuardrailFilterFieldSelectorLabels = __webpack_exports__.useGuardrailFilterFieldSelectorLabels;
@@ -1180,6 +1279,9 @@ exports.useGuardrailScopeSelectorLabels = __webpack_exports__.useGuardrailScopeS
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CENTRALIZED_GUARDRAILS_EN_LABELS",
     "CENTRALIZED_GUARDRAILS_EN_MESSAGES",
+    "CUSTOM_GUARDRAIL_BUILDER_EN_LABELS",
+    "CUSTOM_GUARDRAIL_BUILDER_EN_MESSAGES",
+    "CUSTOM_GUARDRAIL_BUILDER_REUSED_LABEL_KEYS",
     "GUARDRAIL_ACTION_EN_LABELS",
     "GUARDRAIL_ACTION_LABEL_KEYS",
     "GUARDRAIL_BUILDER_EN_LABELS",
@@ -1198,6 +1300,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "GUARDRAIL_SCOPE_SELECTOR_LABEL_KEYS",
     "formatGuardrailFormMessage",
     "resolveCentralizedGuardrailsLabels",
+    "resolveCustomGuardrailBuilderLabels",
     "resolveGuardrailActionLabels",
     "resolveGuardrailBuilderLabels",
     "resolveGuardrailFilterFieldSelectorLabels",
@@ -1208,6 +1311,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "resolveGuardrailRulesLabels",
     "resolveGuardrailScopeSelectorLabels",
     "useCentralizedGuardrailsLabels",
+    "useCustomGuardrailBuilderLabels",
     "useGuardrailActionLabels",
     "useGuardrailBuilderLabels",
     "useGuardrailFilterFieldSelectorLabels",