feat(metadataeditor): add agent selector (#4098)

* feat(metadataeditor): add agent selector

* feat(metadataeditor): add agent selector

* feat(metadataeditor): add agent selector

* feat(metadataeditor): add agent selector

* feat(metadataeditor): add agent selector

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: ahorowitz123

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

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { InlineNotice } from '@box/blueprint-web';
+import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { InlineNotice, TooltipProvider } from '@box/blueprint-web';
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
 
 import Toggle from '../../components/toggle';
@@ -15,6 +16,20 @@ 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 PRICING_LINK = 'https://www.box.com/pricing';
+
+const agents = [
+    {
+        id: '1',
+        name: 'Basic',
+        isEnterpriseDefault: true,
+    },
+    {
+        id: '2',
+        name: 'Enhanced (Gemini 2.5 Pro)',
+        isEnterpriseDefault: false,
+    },
+];
+
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
@@ -126,6 +141,17 @@ const CascadePolicy = ({
                                 <FormattedMessage {...messages.aiAutofillLearnMore} />
                             </Link>
                         </div>
+                        <div className="metadata-cascade-ai-agent-selector">
+                            <TooltipProvider>
+                                <BoxAiAgentSelector
+                                    agents={agents}
+                                    onErrorAction={() => {}}
+                                    requestState="success"
+                                    selectedAgent={agents[0]}
+                                    variant="sidebar"
+                                />
+                            </TooltipProvider>
+                        </div>
                         <InlineNotice className="metadata-cascade-ai-notice" variant="info">
                             <FormattedMessage
                                 {...messages.aiAutofillNotice}

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

@@ -78,3 +78,7 @@ $cascade-policy-background: #f1e2fd;
         }
     }
 }
+
+.metadata-cascade-ai-agent-selector {
+    margin-top: 4px;
+}

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

@@ -92,4 +92,11 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
             expect(pricingLink.closest('a')).toHaveAttribute('target', '_blank');
         });
     });
+
+    describe('AI Agent Selector', () => {
+        test('should render AI agent selector with default to basic when AI features are enabled', () => {
+            render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
+            expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+        });
+    });
 });