feat(metadata-instance-editor): add enhanced ai extract support

i18n/en-US.properties

@@ -1262,6 +1262,8 @@ boxui.metadataInstanceEditor.editTooltip = Edit Metadata
 boxui.metadataInstanceEditor.enableAIAutofill = Box AI Autofill
 # Label for enable cascade policy toggle switch
 boxui.metadataInstanceEditor.enableCascadePolicy = Enable Cascade Policy
+# Name of the enhanced AI agent
+boxui.metadataInstanceEditor.enhancedAgentName = Enhanced
 # Message for users who may attempt to remove a custom metadata instance for a file. Also non-recoverable
 boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm = Are you sure you want to delete this custom metadata and all of its values from this file?
 # Message for users who may attempt to remove a metadata instance for a file, which is non-recoverable
@@ -1288,6 +1290,8 @@ boxui.metadataInstanceEditor.noMetadataAddTemplate = Click 'Add' in the top righ
 boxui.metadataInstanceEditor.operationNotImmediate = This operation is not immediate and may take some time.
 # Label to remove a template
 boxui.metadataInstanceEditor.removeTemplate = Remove
+# Name of the standard AI agent
+boxui.metadataInstanceEditor.standardAgentName = Standard
 # Label to add a template
 boxui.metadataInstanceEditor.templateAdd = Add
 # Placeholder to search for all templates

package.json

@@ -126,7 +126,7 @@
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "^12.7.1",
         "@box/blueprint-web-assets": "^4.60.0",
-        "@box/box-ai-agent-selector": "^0.41.10",
+        "@box/box-ai-agent-selector": "^0.48.5",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.34.9",

src/common/types/metadata.js

@@ -93,10 +93,15 @@ type MetadataCascadePolicy = {
     cascadePolicyType?: string,
 };
 
+type MetadataCascadePolicyConfiguration = {
+    agent: string,
+};
+
 type MetadataCascadingPolicyData = {
     id?: string,
     isEnabled: boolean,
     overwrite: boolean,
+    cascadePolicyConfiguration?: MetadataCascadePolicyConfiguration,
 };
 
 type MetadataInstance = {

src/features/metadata-instance-editor/CascadePolicy.js

@@ -1,10 +1,13 @@
 // @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';
-// $FlowFixMe
+import { useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { BoxAiAdvancedColor } from '@box/blueprint-web-assets/icons/Medium';
+import { type AgentType } from '@box/box-ai-agent-selector';
+
+import { BoxAiAgentSelectorWithApiContainer } from '@box/box-ai-agent-selector';
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
 
 import Toggle from '../../components/toggle';
@@ -17,19 +20,6 @@ import './CascadePolicy.scss';
 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 +30,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 +46,7 @@ const CascadePolicy = ({
     isAIFolderExtractionEnabled,
     isExistingCascadePolicy,
     onAIFolderExtractionToggle,
+    onAIAgentSelect,
     onCascadeToggle,
     onCascadeModeChange,
     shouldShowCascadeOptions,
@@ -67,6 +59,39 @@ const CascadePolicy = ({
         </div>
     ) : null;
 
+    const agents = React.useMemo(
+        () => [
+            {
+                id: '1',
+                name: formatMessage(messages.standardAgentName),
+                isEnterpriseDefault: true,
+            },
+            {
+                id: '2',
+                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((): Promise<AgentListResponse> => {
+        return Promise.resolve({ agents });
+    }, [agents]);
+
+    const handleAgentSelect = useCallback(
+        (agent: AgentType | null) => {
+            if (onAIAgentSelect) {
+                onAIAgentSelect(agent);
+            }
+        },
+        [onAIAgentSelect],
+    );
+
     return canEdit ? (
         <>
             {isExistingCascadePolicy && (
@@ -83,6 +108,7 @@ const CascadePolicy = ({
                         <FormattedMessage tagName="strong" {...messages.enableCascadePolicy} />
                         {!isCustomMetadata && (
                             <Toggle
+                                aria-label={formatMessage(messages.enableCascadePolicy)}
                                 className={`metadata-cascade-toggle ${
                                     isCascadingEnabled ? 'cascade-on' : 'cascade-off'
                                 }`}
@@ -144,6 +170,7 @@ const CascadePolicy = ({
                             <BoxAiLogo 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 +185,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>
                         )}

src/features/metadata-instance-editor/Instance.js

@@ -24,7 +24,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 } from './constants';
 import {
     JSON_PATCH_OP_REMOVE,
     JSON_PATCH_OP_ADD,
@@ -38,6 +38,7 @@ import type {
     MetadataFields,
     MetadataTemplate,
     MetadataCascadePolicy,
+    MetadataCascadePolicyConfiguration,
     MetadataCascadingPolicyData,
     MetadataTemplateField,
     MetadataFieldValue,
@@ -72,6 +73,7 @@ type State = {
     data: Object,
     errors: { [string]: React.Node },
     isAIFolderExtractionEnabled: boolean,
+    cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,
     isBusy: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
@@ -217,6 +219,7 @@ class Instance extends React.PureComponent<Props, State> {
             isAIFolderExtractionEnabled,
             isCascadingEnabled,
             isCascadingOverwritten,
+            cascadePolicyConfiguration,
         }: State = this.state;
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
@@ -229,6 +232,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 +243,7 @@ class Instance extends React.PureComponent<Props, State> {
                       isEnabled: isCascadingEnabled,
                       overwrite: isCascadingOverwritten,
                       isAIFolderExtractionEnabled,
+                      cascadePolicyConfiguration,
                   }
                 : undefined,
             cloneDeep(currentData),
@@ -342,6 +347,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 === '2') {
+            this.setState({
+                cascadePolicyConfiguration: {
+                    agent: ENHANCED_AGENT_CONFIGURATION,
+                },
+            });
+        } else {
+            this.setState({ cascadePolicyConfiguration: null });
+        }
+    };
+
     /**
      * Returns the state from props
      *
@@ -684,6 +706,7 @@ class Instance extends React.PureComponent<Props, State> {
                                             onAIFolderExtractionToggle={this.onAIFolderExtractionToggle}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}
+                                            onAIAgentSelect={this.onAIAgentSelect}
                                             shouldShowCascadeOptions={shouldShowCascadeOptions}
                                         />
                                     )}

src/features/metadata-instance-editor/__tests__/CascadePolicy.test.js

@@ -113,21 +113,68 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
     });
 
     describe('AI Agent Selector', () => {
-        test('should render AI agent selector with default to basic when AI features are enabled', () => {
+        test('should render AI agent selector with default to basic when AI features are enabled', async () => {
             render(
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
                     canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
+                    isAIFolderExtractionEnabled
+                    onAIFolderExtractionToggle={jest.fn()}
                 />,
             );
-            expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
+
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            await userEvent.click(aiToggle); // Enable AI
+
+            expect(aiToggle).toBeChecked();
+
+            expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
         });
 
         test('should not render AI agent selector when canUseAIFolderExtractionAgentSelector is false', () => {
             render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
-            expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
+            expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
+        });
+
+        test('should call onAIAgentSelect when an agent is selected', async () => {
+            const onAIAgentSelect = jest.fn();
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    canUseAIFolderExtractionAgentSelector
+                    shouldShowCascadeOptions
+                    isAIFolderExtractionEnabled
+                    onAIAgentSelect={onAIAgentSelect}
+                    onAIFolderExtractionToggle={jest.fn()}
+                />,
+            );
+
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            await userEvent.click(aiToggle); // Enable AI
+
+            expect(aiToggle).toBeChecked();
+
+            // Find the combobox by its accessible name
+            const combobox = screen.getByRole('combobox', { name: 'Standard' });
+
+            // Open the combobox (simulate user click)
+            await userEvent.click(combobox);
+
+            // Find the option for "Advanced" and select it
+            const option = await screen.findByRole('option', { name: 'Enhanced' });
+            await userEvent.click(option);
+
+            // The expected agent object (should match the one in CascadePolicy.js)
+            const expectedAgent = {
+                id: '1',
+                name: 'Standard',
+                isEnterpriseDefault: true,
+            };
+
+            expect(onAIAgentSelect).toHaveBeenCalledWith(expectedAgent);
         });
     });
 

src/features/metadata-instance-editor/__tests__/Instance.test.js

@@ -863,12 +863,30 @@ describe('Instance Component - React Testing Library', () => {
 
     describe('Props passed to CascadePolicy', () => {
         test('should pass canUseAIFolderExtractionAgentSelector to CascadePolicy', async () => {
-            render(<Instance {...getBaseProps({ canUseAIFolderExtractionAgentSelector: true })} />);
+            render(
+                <Instance
+                    {...getBaseProps({
+                        canUseAIFolderExtractionAgentSelector: true,
+                        cascadePolicy: {
+                            id: 'policy-1',
+                            canEdit: true,
+                            isEnabled: true,
+                            cascadePolicyType: CASCADE_POLICY_TYPE_AI_EXTRACT,
+                        },
+                    })}
+                />,
+            );
 
             const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
             if (editButton) await userEvent.click(editButton); // Enter edit mode to ensure CascadePolicy options are visible
 
-            expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
+            const cascadeToggle = screen.getByRole('switch', { name: 'Enable Cascade Policy' });
+            expect(cascadeToggle).toBeChecked();
+
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            expect(aiToggle).toBeChecked();
+
+            expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
         });
 
         test('should disable CascadePolicy options when a cascade already exists', async () => {