box-ui-elements 23.4.0-beta.31 → 23.4.0-beta.32

package/es/common/types/metadata.js.flow

@@ -93,10 +93,15 @@ type MetadataCascadePolicy = {
     cascadePolicyType?: string,
 };
 
+type MetadataCascadePolicyConfiguration = {
+    agent: string,
+};
+
 type MetadataCascadingPolicyData = {
     id?: string,
     isEnabled: boolean,
     overwrite: boolean,
+    cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,
 };
 
 type MetadataInstance = {
@@ -187,6 +192,7 @@ export type {
     MetadataQueryInstanceTypeField,
     MetadataType,
     MetadataCascadePolicy,
+    MetadataCascadePolicyConfiguration,
     MetadataCascadingPolicyData,
     MetadataInstanceV2,
     MetadataEditor,

package/es/common/types/metadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.js","names":["FIELD_TYPE_DATE","FIELD_TYPE_ENUM","FIELD_TYPE_FLOAT","FIELD_TYPE_MULTISELECT","FIELD_TYPE_STRING","FIELD_TYPE_TAXONOMY"],"sources":["../../../src/common/types/metadata.js"],"sourcesContent":["// @flow strict\nimport {\n    FIELD_TYPE_DATE,\n    FIELD_TYPE_ENUM,\n    FIELD_TYPE_FLOAT,\n    FIELD_TYPE_MULTISELECT,\n    FIELD_TYPE_STRING,\n    FIELD_TYPE_TAXONOMY,\n} from '../../features/metadata-instance-fields/constants';\nimport type { SkillCards } from './skills';\n\ntype MetadataFieldType =\n    | typeof FIELD_TYPE_DATE\n    | typeof FIELD_TYPE_ENUM\n    | typeof FIELD_TYPE_FLOAT\n    | typeof FIELD_TYPE_MULTISELECT\n    | typeof FIELD_TYPE_STRING\n    | typeof FIELD_TYPE_TAXONOMY;\n\ntype MetadataTemplateFieldOption = {\n    id?: string,\n    key: string,\n};\n\nexport type TaxonomyLevel = {\n    description: string,\n    displayName: string,\n    level: number,\n};\n\ntype MetadataTemplateField = {\n    description?: string,\n    displayName: string,\n    hidden?: boolean,\n    id: string,\n    isHidden?: boolean,\n    key: string, // V2\n    options?: Array<MetadataTemplateFieldOption>, // V3\n    type: MetadataFieldType,\n    levels?: Array<TaxonomyLevel>,\n    namespace?: string,\n    taxonomyKey?: string,\n    taxonomy_key?: string,\n};\n\ntype MetadataTemplate = {\n    displayName?: string,\n    fields?: Array<MetadataTemplateField>,\n    hidden?: boolean,\n    id: string,\n    isHidden?: boolean,\n    scope: string, // V2\n    templateKey: string, // V3\n};\n\ntype MetadataTemplateSchemaResponse = {\n    data?: MetadataTemplate,\n};\n\ntype MetadataSkillsTemplate = {\n    archivedItemTemplate?: {\n        archiveDate: string,\n    },\n    boxSkillsCards?: SkillCards,\n};\n\n// $FlowFixMe flow strict doesn't like use of \"any\"\ntype MetadataFieldValue = string | number | Array<any>;\n\ntype MetadataFields = { [string]: MetadataFieldValue };\n\ntype MetadataQueryInstanceTypeField = {\n    displayName: string,\n    key: string,\n    options?: MetadataTemplateFieldOption,\n    type: string,\n    value: ?MetadataFieldValue,\n};\n\ntype MetadataQueryInstanceTemplate = {\n    fields: Array<MetadataQueryInstanceTypeField>,\n    id: string,\n};\n\ntype MetadataType = {\n    enterprise?: MetadataQueryInstanceTemplate,\n    global?: MetadataSkillsTemplate,\n};\n\ntype MetadataCascadePolicy = {\n    canEdit?: boolean,\n    id?: string,\n    cascadePolicyType?: string,\n};\n\ntype MetadataCascadingPolicyData = {\n    id?: string,\n    isEnabled: boolean,\n    overwrite: boolean,\n};\n\ntype MetadataInstance = {\n    canEdit: boolean,\n    cascadePolicy?: MetadataCascadePolicy,\n    data: MetadataFields,\n    id: string,\n};\n\ntype MetadataInstanceV2 = {\n    $canEdit: boolean,\n    $id: string,\n    $parent: string,\n    $scope: string,\n    $template: string,\n    $type: string,\n    $typeVersion: number,\n    $version: number,\n};\n\ntype MetadataEditor = {\n    hasError?: boolean,\n    instance: MetadataInstance,\n    isDirty?: boolean,\n    template: MetadataTemplate,\n};\n\ntype MetadataSuggestion = {\n    $scope: string,\n    $templateKey: string,\n    suggestions: { [key: string]: string | number | string[] },\n};\n\ntype MetadataOptionEntryAncestor = {\n    id: string,\n    display_name: string,\n    level: string,\n};\n\ntype MetadataOptionEntry = {\n    id: string,\n    display_name: string,\n    level: number,\n    ancestors: MetadataOptionEntryAncestor[],\n    deprecated: boolean,\n    selectable: boolean,\n};\n\ntype MetadataOptions = {\n    entries: MetadataOptionEntry[],\n    next_marker: string | null,\n    result_count: number,\n};\n\ntype MetadataTemplateInstanceField = {\n    description?: string,\n    displayName?: string,\n    hidden?: boolean,\n    id?: string,\n    key: string, // V2\n    levels?: Array<TaxonomyLevel>,\n    options?: Array<MetadataTemplateFieldOption>, // V3\n    type: MetadataFieldType,\n    value: MetadataFieldValue,\n};\n\ntype MetadataTemplateInstance = {\n    canEdit: boolean,\n    displayName?: string,\n    hidden?: boolean,\n    id: string,\n    fields: MetadataTemplateInstanceField[],\n    scope: string,\n    templateKey: string,\n    type: string,\n};\n\nexport type {\n    MetadataTemplateInstanceField,\n    MetadataTemplateInstance,\n    MetadataFieldType,\n    MetadataTemplateFieldOption,\n    MetadataTemplateField,\n    MetadataTemplate,\n    MetadataTemplateSchemaResponse,\n    MetadataFieldValue,\n    MetadataFields,\n    MetadataQueryInstanceTypeField,\n    MetadataType,\n    MetadataCascadePolicy,\n    MetadataCascadingPolicyData,\n    MetadataInstanceV2,\n    MetadataEditor,\n    MetadataSuggestion,\n    MetadataOptions,\n};\n"],"mappings":"AACA,SACIA,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,QAChB,mDAAmD;;AA0D1D","ignoreList":[]}
+{"version":3,"file":"metadata.js","names":["FIELD_TYPE_DATE","FIELD_TYPE_ENUM","FIELD_TYPE_FLOAT","FIELD_TYPE_MULTISELECT","FIELD_TYPE_STRING","FIELD_TYPE_TAXONOMY"],"sources":["../../../src/common/types/metadata.js"],"sourcesContent":["// @flow strict\nimport {\n    FIELD_TYPE_DATE,\n    FIELD_TYPE_ENUM,\n    FIELD_TYPE_FLOAT,\n    FIELD_TYPE_MULTISELECT,\n    FIELD_TYPE_STRING,\n    FIELD_TYPE_TAXONOMY,\n} from '../../features/metadata-instance-fields/constants';\nimport type { SkillCards } from './skills';\n\ntype MetadataFieldType =\n    | typeof FIELD_TYPE_DATE\n    | typeof FIELD_TYPE_ENUM\n    | typeof FIELD_TYPE_FLOAT\n    | typeof FIELD_TYPE_MULTISELECT\n    | typeof FIELD_TYPE_STRING\n    | typeof FIELD_TYPE_TAXONOMY;\n\ntype MetadataTemplateFieldOption = {\n    id?: string,\n    key: string,\n};\n\nexport type TaxonomyLevel = {\n    description: string,\n    displayName: string,\n    level: number,\n};\n\ntype MetadataTemplateField = {\n    description?: string,\n    displayName: string,\n    hidden?: boolean,\n    id: string,\n    isHidden?: boolean,\n    key: string, // V2\n    options?: Array<MetadataTemplateFieldOption>, // V3\n    type: MetadataFieldType,\n    levels?: Array<TaxonomyLevel>,\n    namespace?: string,\n    taxonomyKey?: string,\n    taxonomy_key?: string,\n};\n\ntype MetadataTemplate = {\n    displayName?: string,\n    fields?: Array<MetadataTemplateField>,\n    hidden?: boolean,\n    id: string,\n    isHidden?: boolean,\n    scope: string, // V2\n    templateKey: string, // V3\n};\n\ntype MetadataTemplateSchemaResponse = {\n    data?: MetadataTemplate,\n};\n\ntype MetadataSkillsTemplate = {\n    archivedItemTemplate?: {\n        archiveDate: string,\n    },\n    boxSkillsCards?: SkillCards,\n};\n\n// $FlowFixMe flow strict doesn't like use of \"any\"\ntype MetadataFieldValue = string | number | Array<any>;\n\ntype MetadataFields = { [string]: MetadataFieldValue };\n\ntype MetadataQueryInstanceTypeField = {\n    displayName: string,\n    key: string,\n    options?: MetadataTemplateFieldOption,\n    type: string,\n    value: ?MetadataFieldValue,\n};\n\ntype MetadataQueryInstanceTemplate = {\n    fields: Array<MetadataQueryInstanceTypeField>,\n    id: string,\n};\n\ntype MetadataType = {\n    enterprise?: MetadataQueryInstanceTemplate,\n    global?: MetadataSkillsTemplate,\n};\n\ntype MetadataCascadePolicy = {\n    canEdit?: boolean,\n    id?: string,\n    cascadePolicyType?: string,\n};\n\ntype MetadataCascadePolicyConfiguration = {\n    agent: string,\n};\n\ntype MetadataCascadingPolicyData = {\n    id?: string,\n    isEnabled: boolean,\n    overwrite: boolean,\n    cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,\n};\n\ntype MetadataInstance = {\n    canEdit: boolean,\n    cascadePolicy?: MetadataCascadePolicy,\n    data: MetadataFields,\n    id: string,\n};\n\ntype MetadataInstanceV2 = {\n    $canEdit: boolean,\n    $id: string,\n    $parent: string,\n    $scope: string,\n    $template: string,\n    $type: string,\n    $typeVersion: number,\n    $version: number,\n};\n\ntype MetadataEditor = {\n    hasError?: boolean,\n    instance: MetadataInstance,\n    isDirty?: boolean,\n    template: MetadataTemplate,\n};\n\ntype MetadataSuggestion = {\n    $scope: string,\n    $templateKey: string,\n    suggestions: { [key: string]: string | number | string[] },\n};\n\ntype MetadataOptionEntryAncestor = {\n    id: string,\n    display_name: string,\n    level: string,\n};\n\ntype MetadataOptionEntry = {\n    id: string,\n    display_name: string,\n    level: number,\n    ancestors: MetadataOptionEntryAncestor[],\n    deprecated: boolean,\n    selectable: boolean,\n};\n\ntype MetadataOptions = {\n    entries: MetadataOptionEntry[],\n    next_marker: string | null,\n    result_count: number,\n};\n\ntype MetadataTemplateInstanceField = {\n    description?: string,\n    displayName?: string,\n    hidden?: boolean,\n    id?: string,\n    key: string, // V2\n    levels?: Array<TaxonomyLevel>,\n    options?: Array<MetadataTemplateFieldOption>, // V3\n    type: MetadataFieldType,\n    value: MetadataFieldValue,\n};\n\ntype MetadataTemplateInstance = {\n    canEdit: boolean,\n    displayName?: string,\n    hidden?: boolean,\n    id: string,\n    fields: MetadataTemplateInstanceField[],\n    scope: string,\n    templateKey: string,\n    type: string,\n};\n\nexport type {\n    MetadataTemplateInstanceField,\n    MetadataTemplateInstance,\n    MetadataFieldType,\n    MetadataTemplateFieldOption,\n    MetadataTemplateField,\n    MetadataTemplate,\n    MetadataTemplateSchemaResponse,\n    MetadataFieldValue,\n    MetadataFields,\n    MetadataQueryInstanceTypeField,\n    MetadataType,\n    MetadataCascadePolicy,\n    MetadataCascadePolicyConfiguration,\n    MetadataCascadingPolicyData,\n    MetadataInstanceV2,\n    MetadataEditor,\n    MetadataSuggestion,\n    MetadataOptions,\n};\n"],"mappings":"AACA,SACIA,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,QAChB,mDAAmD;;AA0D1D","ignoreList":[]}

package/es/features/metadata-instance-editor/CascadePolicy.js

@@ -1,27 +1,22 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import * as React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { InlineNotice } from '@box/blueprint-web';
-import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+// $FlowFixMe
+import { BoxAiAdvancedColor, BoxAiColor } from '@box/blueprint-web-assets/icons/Medium';
 // $FlowFixMe
-import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
+import { BoxAiAgentSelectorWithApiContainer } from '@box/box-ai-agent-selector';
 import Toggle from '../../components/toggle';
 import { RadioButton, RadioGroup } from '../../components/radio';
 import Link from '../../components/link/Link';
 import IconAlertDefault from '../../icons/general/IconAlertDefault';
 import messages from './messages';
 import './CascadePolicy.scss';
+import { STANDARD_AGENT_ID, ENHANCED_AGENT_ID } from './constants';
 const COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';
 const AI_LINK = 'https://www.box.com/ai';
-const agents = [{
-  id: '1',
-  name: 'Basic',
-  isEnterpriseDefault: true
-}, {
-  id: '2',
-  name: 'Enhanced (Gemini 2.5 Pro)',
-  isEnterpriseDefault: false
-}];
 const CascadePolicy = ({
   canEdit,
   canUseAIFolderExtraction,
@@ -32,6 +27,7 @@ const CascadePolicy = ({
   isAIFolderExtractionEnabled,
   isExistingCascadePolicy,
   onAIFolderExtractionToggle,
+  onAIAgentSelect,
   onCascadeToggle,
   onCascadeModeChange,
   shouldShowCascadeOptions
@@ -42,6 +38,30 @@ const CascadePolicy = ({
   const readOnlyState = isCascadingEnabled ? /*#__PURE__*/React.createElement("div", {
     className: "metadata-cascade-notice"
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.metadataCascadePolicyEnabledInfo)) : null;
+  const agents = React.useMemo(() => [{
+    id: STANDARD_AGENT_ID,
+    name: formatMessage(messages.standardAgentName),
+    isEnterpriseDefault: true
+  }, {
+    id: ENHANCED_AGENT_ID,
+    name: formatMessage(messages.enhancedAgentName),
+    isEnterpriseDefault: false,
+    customIcon: BoxAiAdvancedColor
+  }], [formatMessage]);
+
+  // BoxAiAgentSelectorWithApiContainer expects a function that returns a Promise<AgentListResponse>
+  // Since we're passing in our own agents, we don't need to make an API call,
+  // so we wrap the store data in a Promise to satisfy the component's interface requirements.
+  const agentFetcher = useCallback(() => {
+    return Promise.resolve({
+      agents
+    });
+  }, [agents]);
+  const handleAgentSelect = useCallback(agent => {
+    if (onAIAgentSelect) {
+      onAIAgentSelect(agent);
+    }
+  }, [onAIAgentSelect]);
   return canEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, isExistingCascadePolicy && /*#__PURE__*/React.createElement(InlineNotice, {
     variant: "info",
     variantIconAriaLabel: formatMessage(messages.cascadePolicyOptionsDisabledNoticeIconAriaLabel)
@@ -53,6 +73,7 @@ const CascadePolicy = ({
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({
     tagName: "strong"
   }, messages.enableCascadePolicy)), !isCustomMetadata && /*#__PURE__*/React.createElement(Toggle, {
+    "aria-label": formatMessage(messages.enableCascadePolicy),
     className: `metadata-cascade-toggle ${isCascadingEnabled ? 'cascade-on' : 'cascade-off'}`,
     isOn: isCascadingEnabled,
     label: "",
@@ -86,13 +107,14 @@ const CascadePolicy = ({
     "data-testid": "ai-folder-extraction"
   }, /*#__PURE__*/React.createElement("div", {
     className: "metadata-cascade-enable"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxAiLogo, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxAiColor, {
     className: "metadata-cascade-ai-logo",
     width: 16,
     height: 16
   }), /*#__PURE__*/React.createElement(FormattedMessage, _extends({
     tagName: "strong"
   }, messages.enableAIAutofill)), /*#__PURE__*/React.createElement(Toggle, {
+    "aria-label": formatMessage(messages.enableAIAutofill),
     className: "metadata-cascade-toggle",
     isOn: isAIFolderExtractionEnabled,
     isDisabled: isExistingCascadePolicy,
@@ -104,15 +126,13 @@ const CascadePolicy = ({
     className: "cascade-policy-link",
     href: AI_LINK,
     target: "_blank"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillLearnMore))), canUseAIFolderExtractionAgentSelector && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillLearnMore))), canUseAIFolderExtractionAgentSelector && isAIFolderExtractionEnabled && /*#__PURE__*/React.createElement("div", {
     className: "metadata-cascade-ai-agent-selector"
-  }, /*#__PURE__*/React.createElement(BoxAiAgentSelector, {
-    agents: agents,
+  }, /*#__PURE__*/React.createElement(BoxAiAgentSelectorWithApiContainer, {
     disabled: isExistingCascadePolicy,
-    onErrorAction: () => {},
-    requestState: "success",
-    selectedAgent: agents[0],
-    variant: "sidebar"
+    fetcher: agentFetcher,
+    onSelectAgent: handleAgentSelect,
+    recordAction: () => {}
   }))))) : readOnlyState;
 };
 export default CascadePolicy;

package/es/features/metadata-instance-editor/CascadePolicy.js.flow

@@ -1,11 +1,16 @@
 // @flow
 import * as React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
 
 import { InlineNotice } from '@box/blueprint-web';
-import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
 // $FlowFixMe
-import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
+import { BoxAiAdvancedColor, BoxAiColor } from '@box/blueprint-web-assets/icons/Medium';
+import { type AgentType } from '@box/box-ai-agent-selector';
+
+// $FlowFixMe
+import { BoxAiAgentSelectorWithApiContainer } from '@box/box-ai-agent-selector';
 
 import Toggle from '../../components/toggle';
 import { RadioButton, RadioGroup } from '../../components/radio';
@@ -13,23 +18,11 @@ import Link from '../../components/link/Link';
 import IconAlertDefault from '../../icons/general/IconAlertDefault';
 import messages from './messages';
 import './CascadePolicy.scss';
+import { STANDARD_AGENT_ID, ENHANCED_AGENT_ID } from './constants';
 
 const COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';
 const AI_LINK = 'https://www.box.com/ai';
 
-const agents = [
-    {
-        id: '1',
-        name: 'Basic',
-        isEnterpriseDefault: true,
-    },
-    {
-        id: '2',
-        name: 'Enhanced (Gemini 2.5 Pro)',
-        isEnterpriseDefault: false,
-    },
-];
-
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
@@ -40,6 +33,7 @@ type Props = {
     isCustomMetadata: boolean,
     isExistingCascadePolicy: boolean,
     onAIFolderExtractionToggle: (value: boolean) => void,
+    onAIAgentSelect?: (agent: AgentType | null) => void,
     onCascadeModeChange: (value: boolean) => void,
     onCascadeToggle: (value: boolean) => void,
     shouldShowCascadeOptions: boolean,
@@ -55,6 +49,7 @@ const CascadePolicy = ({
     isAIFolderExtractionEnabled,
     isExistingCascadePolicy,
     onAIFolderExtractionToggle,
+    onAIAgentSelect,
     onCascadeToggle,
     onCascadeModeChange,
     shouldShowCascadeOptions,
@@ -67,6 +62,39 @@ const CascadePolicy = ({
         </div>
     ) : null;
 
+    const agents = React.useMemo(
+        () => [
+            {
+                id: STANDARD_AGENT_ID,
+                name: formatMessage(messages.standardAgentName),
+                isEnterpriseDefault: true,
+            },
+            {
+                id: ENHANCED_AGENT_ID,
+                name: formatMessage(messages.enhancedAgentName),
+                isEnterpriseDefault: false,
+                customIcon: BoxAiAdvancedColor,
+            },
+        ],
+        [formatMessage],
+    );
+
+    // BoxAiAgentSelectorWithApiContainer expects a function that returns a Promise<AgentListResponse>
+    // Since we're passing in our own agents, we don't need to make an API call,
+    // so we wrap the store data in a Promise to satisfy the component's interface requirements.
+    const agentFetcher = useCallback(() => {
+        return Promise.resolve({ agents });
+    }, [agents]);
+
+    const handleAgentSelect = useCallback(
+        (agent: AgentType | null) => {
+            if (onAIAgentSelect) {
+                onAIAgentSelect(agent);
+            }
+        },
+        [onAIAgentSelect],
+    );
+
     return canEdit ? (
         <>
             {isExistingCascadePolicy && (
@@ -83,6 +111,7 @@ const CascadePolicy = ({
                         <FormattedMessage tagName="strong" {...messages.enableCascadePolicy} />
                         {!isCustomMetadata && (
                             <Toggle
+                                aria-label={formatMessage(messages.enableCascadePolicy)}
                                 className={`metadata-cascade-toggle ${
                                     isCascadingEnabled ? 'cascade-on' : 'cascade-off'
                                 }`}
@@ -141,9 +170,10 @@ const CascadePolicy = ({
                 <div className="metadata-cascade-editor" data-testid="ai-folder-extraction">
                     <div className="metadata-cascade-enable">
                         <div>
-                            <BoxAiLogo className="metadata-cascade-ai-logo" width={16} height={16} />
+                            <BoxAiColor className="metadata-cascade-ai-logo" width={16} height={16} />
                             <FormattedMessage tagName="strong" {...messages.enableAIAutofill} />
                             <Toggle
+                                aria-label={formatMessage(messages.enableAIAutofill)}
                                 className="metadata-cascade-toggle"
                                 isOn={isAIFolderExtractionEnabled}
                                 isDisabled={isExistingCascadePolicy}
@@ -158,15 +188,13 @@ const CascadePolicy = ({
                                 <FormattedMessage {...messages.aiAutofillLearnMore} />
                             </Link>
                         </div>
-                        {canUseAIFolderExtractionAgentSelector && (
+                        {canUseAIFolderExtractionAgentSelector && isAIFolderExtractionEnabled && (
                             <div className="metadata-cascade-ai-agent-selector">
-                                <BoxAiAgentSelector
-                                    agents={agents}
+                                <BoxAiAgentSelectorWithApiContainer
                                     disabled={isExistingCascadePolicy}
-                                    onErrorAction={() => {}}
-                                    requestState="success"
-                                    selectedAgent={agents[0]}
-                                    variant="sidebar"
+                                    fetcher={agentFetcher}
+                                    onSelectAgent={handleAgentSelect}
+                                    recordAction={() => {}}
                                 />
                             </div>
                         )}

package/es/features/metadata-instance-editor/CascadePolicy.js.map

@@ -1 +1 @@
-{"version":3,"file":"CascadePolicy.js","names":["React","FormattedMessage","useIntl","InlineNotice","BoxAiAgentSelector","BoxAiLogo","Toggle","RadioButton","RadioGroup","Link","IconAlertDefault","messages","COMMUNITY_LINK","AI_LINK","agents","id","name","isEnterpriseDefault","CascadePolicy","canEdit","canUseAIFolderExtraction","canUseAIFolderExtractionAgentSelector","isCascadingEnabled","isCascadingOverwritten","isCustomMetadata","isAIFolderExtractionEnabled","isExistingCascadePolicy","onAIFolderExtractionToggle","onCascadeToggle","onCascadeModeChange","shouldShowCascadeOptions","formatMessage","readOnlyState","createElement","className","metadataCascadePolicyEnabledInfo","Fragment","variant","variantIconAriaLabel","cascadePolicyOptionsDisabledNoticeIconAriaLabel","cascadePolicyOptionsDisabledNotice","_extends","tagName","enableCascadePolicy","isOn","label","onChange","e","target","checked","applyCascadePolicyText","href","cascadePolicyLearnMore","cannotApplyCascadePolicyText","cascadePolicyModeQuestion","operationNotImmediate","value","isDisabled","cascadePolicySkipMode","cascadePolicyOverwriteMode","width","height","enableAIAutofill","aiAutofillDescription","aiAutofillLearnMore","disabled","onErrorAction","requestState","selectedAgent"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { InlineNotice } from '@box/blueprint-web';\nimport { BoxAiAgentSelector } from '@box/box-ai-agent-selector';\n// $FlowFixMe\nimport BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';\n\nimport Toggle from '../../components/toggle';\nimport { RadioButton, RadioGroup } from '../../components/radio';\nimport Link from '../../components/link/Link';\nimport IconAlertDefault from '../../icons/general/IconAlertDefault';\nimport messages from './messages';\nimport './CascadePolicy.scss';\n\nconst COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';\nconst AI_LINK = 'https://www.box.com/ai';\n\nconst agents = [\n    {\n        id: '1',\n        name: 'Basic',\n        isEnterpriseDefault: true,\n    },\n    {\n        id: '2',\n        name: 'Enhanced (Gemini 2.5 Pro)',\n        isEnterpriseDefault: false,\n    },\n];\n\ntype Props = {\n    canEdit: boolean,\n    canUseAIFolderExtraction: boolean,\n    canUseAIFolderExtractionAgentSelector: boolean,\n    isAIFolderExtractionEnabled: boolean,\n    isCascadingEnabled: boolean,\n    isCascadingOverwritten: boolean,\n    isCustomMetadata: boolean,\n    isExistingCascadePolicy: boolean,\n    onAIFolderExtractionToggle: (value: boolean) => void,\n    onCascadeModeChange: (value: boolean) => void,\n    onCascadeToggle: (value: boolean) => void,\n    shouldShowCascadeOptions: boolean,\n};\n\nconst CascadePolicy = ({\n    canEdit,\n    canUseAIFolderExtraction,\n    canUseAIFolderExtractionAgentSelector,\n    isCascadingEnabled,\n    isCascadingOverwritten,\n    isCustomMetadata,\n    isAIFolderExtractionEnabled,\n    isExistingCascadePolicy,\n    onAIFolderExtractionToggle,\n    onCascadeToggle,\n    onCascadeModeChange,\n    shouldShowCascadeOptions,\n}: Props) => {\n    const { formatMessage } = useIntl();\n\n    const readOnlyState = isCascadingEnabled ? (\n        <div className=\"metadata-cascade-notice\">\n            <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />\n        </div>\n    ) : null;\n\n    return canEdit ? (\n        <>\n            {isExistingCascadePolicy && (\n                <InlineNotice\n                    variant=\"info\"\n                    variantIconAriaLabel={formatMessage(messages.cascadePolicyOptionsDisabledNoticeIconAriaLabel)}\n                >\n                    <FormattedMessage {...messages.cascadePolicyOptionsDisabledNotice} />\n                </InlineNotice>\n            )}\n            <div className=\"metadata-cascade-editor\">\n                <div className=\"metadata-cascade-enable\" data-testid=\"metadata-cascade-enable\">\n                    <div>\n                        <FormattedMessage tagName=\"strong\" {...messages.enableCascadePolicy} />\n                        {!isCustomMetadata && (\n                            <Toggle\n                                className={`metadata-cascade-toggle ${\n                                    isCascadingEnabled ? 'cascade-on' : 'cascade-off'\n                                }`}\n                                isOn={isCascadingEnabled}\n                                label=\"\"\n                                onChange={e => onCascadeToggle(e.target.checked)}\n                            />\n                        )}\n                    </div>\n                    {!isCustomMetadata ? (\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.applyCascadePolicyText} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={COMMUNITY_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.cascadePolicyLearnMore} />\n                            </Link>\n                        </div>\n                    ) : (\n                        <div>\n                            <FormattedMessage {...messages.cannotApplyCascadePolicyText} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {shouldShowCascadeOptions && (\n                <div className=\"metadata-cascade-editor\">\n                    <div className=\"metadata-cascading-mode\">\n                        <FormattedMessage {...messages.cascadePolicyModeQuestion} />\n\n                        <div className=\"metadata-operation-not-immediate\">\n                            <IconAlertDefault />\n                            <span>\n                                <FormattedMessage {...messages.operationNotImmediate} />\n                            </span>\n                        </div>\n                        <RadioGroup\n                            className=\"metadata-cascading-options\"\n                            onChange={e => onCascadeModeChange(e.target.value === 'overwrite')}\n                            value={isCascadingOverwritten ? 'overwrite' : 'skip'}\n                        >\n                            <RadioButton\n                                isDisabled={isExistingCascadePolicy}\n                                label={<FormattedMessage {...messages.cascadePolicySkipMode} />}\n                                value=\"skip\"\n                            />\n                            <RadioButton\n                                isDisabled={isExistingCascadePolicy}\n                                label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}\n                                value=\"overwrite\"\n                            />\n                        </RadioGroup>\n                    </div>\n                </div>\n            )}\n            {shouldShowCascadeOptions && canUseAIFolderExtraction && (\n                <div className=\"metadata-cascade-editor\" data-testid=\"ai-folder-extraction\">\n                    <div className=\"metadata-cascade-enable\">\n                        <div>\n                            <BoxAiLogo className=\"metadata-cascade-ai-logo\" width={16} height={16} />\n                            <FormattedMessage tagName=\"strong\" {...messages.enableAIAutofill} />\n                            <Toggle\n                                className=\"metadata-cascade-toggle\"\n                                isOn={isAIFolderExtractionEnabled}\n                                isDisabled={isExistingCascadePolicy}\n                                label=\"\"\n                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}\n                            />\n                        </div>\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.aiAutofillDescription} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={AI_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.aiAutofillLearnMore} />\n                            </Link>\n                        </div>\n                        {canUseAIFolderExtractionAgentSelector && (\n                            <div className=\"metadata-cascade-ai-agent-selector\">\n                                <BoxAiAgentSelector\n                                    agents={agents}\n                                    disabled={isExistingCascadePolicy}\n                                    onErrorAction={() => {}}\n                                    requestState=\"success\"\n                                    selectedAgent={agents[0]}\n                                    variant=\"sidebar\"\n                                />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            )}\n        </>\n    ) : (\n        readOnlyState\n    );\n};\n\nexport default CascadePolicy;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CascadePolicy.js","names":["React","InlineNotice","useCallback","FormattedMessage","useIntl","BoxAiAdvancedColor","BoxAiColor","BoxAiAgentSelectorWithApiContainer","Toggle","RadioButton","RadioGroup","Link","IconAlertDefault","messages","STANDARD_AGENT_ID","ENHANCED_AGENT_ID","COMMUNITY_LINK","AI_LINK","CascadePolicy","canEdit","canUseAIFolderExtraction","canUseAIFolderExtractionAgentSelector","isCascadingEnabled","isCascadingOverwritten","isCustomMetadata","isAIFolderExtractionEnabled","isExistingCascadePolicy","onAIFolderExtractionToggle","onAIAgentSelect","onCascadeToggle","onCascadeModeChange","shouldShowCascadeOptions","formatMessage","readOnlyState","createElement","className","metadataCascadePolicyEnabledInfo","agents","useMemo","id","name","standardAgentName","isEnterpriseDefault","enhancedAgentName","customIcon","agentFetcher","Promise","resolve","handleAgentSelect","agent","Fragment","variant","variantIconAriaLabel","cascadePolicyOptionsDisabledNoticeIconAriaLabel","cascadePolicyOptionsDisabledNotice","_extends","tagName","enableCascadePolicy","isOn","label","onChange","e","target","checked","applyCascadePolicyText","href","cascadePolicyLearnMore","cannotApplyCascadePolicyText","cascadePolicyModeQuestion","operationNotImmediate","value","isDisabled","cascadePolicySkipMode","cascadePolicyOverwriteMode","width","height","enableAIAutofill","aiAutofillDescription","aiAutofillLearnMore","disabled","fetcher","onSelectAgent","recordAction"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport { InlineNotice } from '@box/blueprint-web';\nimport { useCallback } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\n// $FlowFixMe\nimport { BoxAiAdvancedColor, BoxAiColor } from '@box/blueprint-web-assets/icons/Medium';\nimport { type AgentType } from '@box/box-ai-agent-selector';\n\n// $FlowFixMe\nimport { BoxAiAgentSelectorWithApiContainer } from '@box/box-ai-agent-selector';\n\nimport Toggle from '../../components/toggle';\nimport { RadioButton, RadioGroup } from '../../components/radio';\nimport Link from '../../components/link/Link';\nimport IconAlertDefault from '../../icons/general/IconAlertDefault';\nimport messages from './messages';\nimport './CascadePolicy.scss';\nimport { STANDARD_AGENT_ID, ENHANCED_AGENT_ID } from './constants';\n\nconst COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';\nconst AI_LINK = 'https://www.box.com/ai';\n\ntype Props = {\n    canEdit: boolean,\n    canUseAIFolderExtraction: boolean,\n    canUseAIFolderExtractionAgentSelector: boolean,\n    isAIFolderExtractionEnabled: boolean,\n    isCascadingEnabled: boolean,\n    isCascadingOverwritten: boolean,\n    isCustomMetadata: boolean,\n    isExistingCascadePolicy: boolean,\n    onAIFolderExtractionToggle: (value: boolean) => void,\n    onAIAgentSelect?: (agent: AgentType | null) => void,\n    onCascadeModeChange: (value: boolean) => void,\n    onCascadeToggle: (value: boolean) => void,\n    shouldShowCascadeOptions: boolean,\n};\n\nconst CascadePolicy = ({\n    canEdit,\n    canUseAIFolderExtraction,\n    canUseAIFolderExtractionAgentSelector,\n    isCascadingEnabled,\n    isCascadingOverwritten,\n    isCustomMetadata,\n    isAIFolderExtractionEnabled,\n    isExistingCascadePolicy,\n    onAIFolderExtractionToggle,\n    onAIAgentSelect,\n    onCascadeToggle,\n    onCascadeModeChange,\n    shouldShowCascadeOptions,\n}: Props) => {\n    const { formatMessage } = useIntl();\n\n    const readOnlyState = isCascadingEnabled ? (\n        <div className=\"metadata-cascade-notice\">\n            <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />\n        </div>\n    ) : null;\n\n    const agents = React.useMemo(\n        () => [\n            {\n                id: STANDARD_AGENT_ID,\n                name: formatMessage(messages.standardAgentName),\n                isEnterpriseDefault: true,\n            },\n            {\n                id: ENHANCED_AGENT_ID,\n                name: formatMessage(messages.enhancedAgentName),\n                isEnterpriseDefault: false,\n                customIcon: BoxAiAdvancedColor,\n            },\n        ],\n        [formatMessage],\n    );\n\n    // BoxAiAgentSelectorWithApiContainer expects a function that returns a Promise<AgentListResponse>\n    // Since we're passing in our own agents, we don't need to make an API call,\n    // so we wrap the store data in a Promise to satisfy the component's interface requirements.\n    const agentFetcher = useCallback(() => {\n        return Promise.resolve({ agents });\n    }, [agents]);\n\n    const handleAgentSelect = useCallback(\n        (agent: AgentType | null) => {\n            if (onAIAgentSelect) {\n                onAIAgentSelect(agent);\n            }\n        },\n        [onAIAgentSelect],\n    );\n\n    return canEdit ? (\n        <>\n            {isExistingCascadePolicy && (\n                <InlineNotice\n                    variant=\"info\"\n                    variantIconAriaLabel={formatMessage(messages.cascadePolicyOptionsDisabledNoticeIconAriaLabel)}\n                >\n                    <FormattedMessage {...messages.cascadePolicyOptionsDisabledNotice} />\n                </InlineNotice>\n            )}\n            <div className=\"metadata-cascade-editor\">\n                <div className=\"metadata-cascade-enable\" data-testid=\"metadata-cascade-enable\">\n                    <div>\n                        <FormattedMessage tagName=\"strong\" {...messages.enableCascadePolicy} />\n                        {!isCustomMetadata && (\n                            <Toggle\n                                aria-label={formatMessage(messages.enableCascadePolicy)}\n                                className={`metadata-cascade-toggle ${\n                                    isCascadingEnabled ? 'cascade-on' : 'cascade-off'\n                                }`}\n                                isOn={isCascadingEnabled}\n                                label=\"\"\n                                onChange={e => onCascadeToggle(e.target.checked)}\n                            />\n                        )}\n                    </div>\n                    {!isCustomMetadata ? (\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.applyCascadePolicyText} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={COMMUNITY_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.cascadePolicyLearnMore} />\n                            </Link>\n                        </div>\n                    ) : (\n                        <div>\n                            <FormattedMessage {...messages.cannotApplyCascadePolicyText} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {shouldShowCascadeOptions && (\n                <div className=\"metadata-cascade-editor\">\n                    <div className=\"metadata-cascading-mode\">\n                        <FormattedMessage {...messages.cascadePolicyModeQuestion} />\n\n                        <div className=\"metadata-operation-not-immediate\">\n                            <IconAlertDefault />\n                            <span>\n                                <FormattedMessage {...messages.operationNotImmediate} />\n                            </span>\n                        </div>\n                        <RadioGroup\n                            className=\"metadata-cascading-options\"\n                            onChange={e => onCascadeModeChange(e.target.value === 'overwrite')}\n                            value={isCascadingOverwritten ? 'overwrite' : 'skip'}\n                        >\n                            <RadioButton\n                                isDisabled={isExistingCascadePolicy}\n                                label={<FormattedMessage {...messages.cascadePolicySkipMode} />}\n                                value=\"skip\"\n                            />\n                            <RadioButton\n                                isDisabled={isExistingCascadePolicy}\n                                label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}\n                                value=\"overwrite\"\n                            />\n                        </RadioGroup>\n                    </div>\n                </div>\n            )}\n            {shouldShowCascadeOptions && canUseAIFolderExtraction && (\n                <div className=\"metadata-cascade-editor\" data-testid=\"ai-folder-extraction\">\n                    <div className=\"metadata-cascade-enable\">\n                        <div>\n                            <BoxAiColor className=\"metadata-cascade-ai-logo\" width={16} height={16} />\n                            <FormattedMessage tagName=\"strong\" {...messages.enableAIAutofill} />\n                            <Toggle\n                                aria-label={formatMessage(messages.enableAIAutofill)}\n                                className=\"metadata-cascade-toggle\"\n                                isOn={isAIFolderExtractionEnabled}\n                                isDisabled={isExistingCascadePolicy}\n                                label=\"\"\n                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}\n                            />\n                        </div>\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.aiAutofillDescription} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={AI_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.aiAutofillLearnMore} />\n                            </Link>\n                        </div>\n                        {canUseAIFolderExtractionAgentSelector && isAIFolderExtractionEnabled && (\n                            <div className=\"metadata-cascade-ai-agent-selector\">\n                                <BoxAiAgentSelectorWithApiContainer\n                                    disabled={isExistingCascadePolicy}\n                                    fetcher={agentFetcher}\n                                    onSelectAgent={handleAgentSelect}\n                                    recordAction={() => {}}\n                                />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            )}\n        </>\n    ) : (\n        readOnlyState\n    );\n};\n\nexport default CascadePolicy;\n"],"mappings":"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","ignoreList":[]}

package/es/features/metadata-instance-editor/Instance.js

@@ -27,7 +27,7 @@ import MetadataInstanceConfirmDialog from './MetadataInstanceConfirmDialog';
 import Footer from './Footer';
 import messages from './messages';
 import { FIELD_TYPE_FLOAT, FIELD_TYPE_INTEGER } from '../metadata-instance-fields/constants';
-import { CASCADE_POLICY_TYPE_AI_EXTRACT, TEMPLATE_CUSTOM_PROPERTIES } from './constants';
+import { CASCADE_POLICY_TYPE_AI_EXTRACT, TEMPLATE_CUSTOM_PROPERTIES, ENHANCED_AGENT_CONFIGURATION, ENHANCED_AGENT_ID } from './constants';
 import { JSON_PATCH_OP_REMOVE, JSON_PATCH_OP_ADD, JSON_PATCH_OP_REPLACE, JSON_PATCH_OP_TEST } from '../../common/constants';
 import { isValidValue } from '../metadata-instance-fields/validateMetadataField';
 import { isHidden } from './metadataUtil';
@@ -126,6 +126,7 @@ class Instance extends React.PureComponent {
         onSave
       } = this.props;
       const {
+        cascadePolicyConfiguration,
         data: currentData,
         errors,
         isAIFolderExtractionEnabled,
@@ -146,7 +147,8 @@ class Instance extends React.PureComponent {
         id: cascadePolicy ? cascadePolicy.id : undefined,
         isEnabled: isCascadingEnabled,
         overwrite: isCascadingOverwritten,
-        isAIFolderExtractionEnabled
+        isAIFolderExtractionEnabled,
+        cascadePolicyConfiguration
       } : undefined, cloneDeep(currentData));
     });
     /**
@@ -247,6 +249,24 @@ class Instance extends React.PureComponent {
         isAIFolderExtractionEnabled: value
       }, this.setDirty);
     });
+    /**
+     * Handles the selection of an AI agent
+     * @param {AgentType | null} agent - The selected agent
+     */
+    _defineProperty(this, "onAIAgentSelect", agent => {
+      // '2' is the id for the enhanced agent
+      if (agent && agent.id === ENHANCED_AGENT_ID) {
+        this.setState({
+          cascadePolicyConfiguration: {
+            agent: ENHANCED_AGENT_CONFIGURATION
+          }
+        });
+      } else {
+        this.setState({
+          cascadePolicyConfiguration: null
+        });
+      }
+    });
     /**
      * Render the correct delete message to show based on custom metadata and file/folder metadata
      */
@@ -393,6 +413,7 @@ class Instance extends React.PureComponent {
   getState(props) {
     const isCascadingEnabled = this.isCascadingEnabledThroughProps(props);
     return {
+      cascadePolicyConfiguration: null,
       data: cloneDeep(props.data),
       errors: {},
       isAIFolderExtractionEnabled: this.isAIFolderExtractionEnabledThroughProps(props),
@@ -625,6 +646,7 @@ class Instance extends React.PureComponent {
       isCascadingOverwritten: isCascadingOverwritten,
       isCustomMetadata: isProperties,
       isExistingCascadePolicy: isExistingCascadePolicy,
+      onAIAgentSelect: this.onAIAgentSelect,
       onAIFolderExtractionToggle: this.onAIFolderExtractionToggle,
       onCascadeModeChange: this.onCascadeModeChange,
       onCascadeToggle: this.onCascadeToggle,

package/es/features/metadata-instance-editor/Instance.js.flow

@@ -6,6 +6,7 @@ import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import noop from 'lodash/noop';
 
+import type { AgentType } from '@box/box-ai-agent-selector';
 import Collapsible from '../../components/collapsible/Collapsible';
 import Form from '../../components/form-elements/form/Form';
 import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
@@ -24,7 +25,12 @@ import MetadataInstanceConfirmDialog from './MetadataInstanceConfirmDialog';
 import Footer from './Footer';
 import messages from './messages';
 import { FIELD_TYPE_FLOAT, FIELD_TYPE_INTEGER } from '../metadata-instance-fields/constants';
-import { CASCADE_POLICY_TYPE_AI_EXTRACT, TEMPLATE_CUSTOM_PROPERTIES } from './constants';
+import {
+    CASCADE_POLICY_TYPE_AI_EXTRACT,
+    TEMPLATE_CUSTOM_PROPERTIES,
+    ENHANCED_AGENT_CONFIGURATION,
+    ENHANCED_AGENT_ID,
+} from './constants';
 import {
     JSON_PATCH_OP_REMOVE,
     JSON_PATCH_OP_ADD,
@@ -38,6 +44,7 @@ import type {
     MetadataFields,
     MetadataTemplate,
     MetadataCascadePolicy,
+    MetadataCascadePolicyConfiguration,
     MetadataCascadingPolicyData,
     MetadataTemplateField,
     MetadataFieldValue,
@@ -69,6 +76,7 @@ type Props = {
 };
 
 type State = {
+    cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,
     data: Object,
     errors: { [string]: React.Node },
     isAIFolderExtractionEnabled: boolean,
@@ -212,6 +220,7 @@ class Instance extends React.PureComponent<Props, State> {
             onSave,
         }: Props = this.props;
         const {
+            cascadePolicyConfiguration,
             data: currentData,
             errors,
             isAIFolderExtractionEnabled,
@@ -229,6 +238,7 @@ class Instance extends React.PureComponent<Props, State> {
             // reset state if cascading policy is removed
             isAIFolderExtractionEnabled: isCascadingEnabled ? isAIFolderExtractionEnabled : false,
         });
+
         onSave(
             id,
             this.createJSONPatch(currentData, originalData),
@@ -239,6 +249,7 @@ class Instance extends React.PureComponent<Props, State> {
                       isEnabled: isCascadingEnabled,
                       overwrite: isCascadingOverwritten,
                       isAIFolderExtractionEnabled,
+                      cascadePolicyConfiguration,
                   }
                 : undefined,
             cloneDeep(currentData),
@@ -342,6 +353,23 @@ class Instance extends React.PureComponent<Props, State> {
         this.setState({ isAIFolderExtractionEnabled: value }, this.setDirty);
     };
 
+    /**
+     * Handles the selection of an AI agent
+     * @param {AgentType | null} agent - The selected agent
+     */
+    onAIAgentSelect = (agent: AgentType | null): void => {
+        // '2' is the id for the enhanced agent
+        if (agent && agent.id === ENHANCED_AGENT_ID) {
+            this.setState({
+                cascadePolicyConfiguration: {
+                    agent: ENHANCED_AGENT_CONFIGURATION,
+                },
+            });
+        } else {
+            this.setState({ cascadePolicyConfiguration: null });
+        }
+    };
+
     /**
      * Returns the state from props
      *
@@ -351,6 +379,7 @@ class Instance extends React.PureComponent<Props, State> {
         const isCascadingEnabled = this.isCascadingEnabledThroughProps(props);
 
         return {
+            cascadePolicyConfiguration: null,
             data: cloneDeep(props.data),
             errors: {},
             isAIFolderExtractionEnabled: this.isAIFolderExtractionEnabledThroughProps(props),
@@ -681,6 +710,7 @@ class Instance extends React.PureComponent<Props, State> {
                                             isCascadingOverwritten={isCascadingOverwritten}
                                             isCustomMetadata={isProperties}
                                             isExistingCascadePolicy={isExistingCascadePolicy}
+                                            onAIAgentSelect={this.onAIAgentSelect}
                                             onAIFolderExtractionToggle={this.onAIFolderExtractionToggle}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}