box-ui-elements 23.3.0-beta.5 → 23.3.0-beta.7

package/i18n/ru-RU.properties

@@ -1210,6 +1210,14 @@ boxui.itemDetails.url = URL-адрес
 boxui.itemDetails.urlPlaceholder = Введите действительный URL-адрес
 # Label for comment options menu
 boxui.media.menuButtonArialLabel = Параметры
+# Description for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillDescription = Use Box AI to automatically extract metadata values.
+# Learn more link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillLearnMore = Подробнее
+# Notice for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillNotice = Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.
+# Pricing details link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillPricingDetails = pricing details
 # Informational text below collapsible header indicating that all fields for this template are hidden
 boxui.metadataInstanceEditor.allAttributesAreHidden = Все атрибуты этого шаблона скрыты.
 # Informational text below enable cascade policy toggle switch
@@ -1250,6 +1258,8 @@ boxui.metadataInstanceEditor.customValue = Значение
 boxui.metadataInstanceEditor.customValuePlaceholder = Пример: 42
 # Text that shows in a tooltip above the edit pencil button.
 boxui.metadataInstanceEditor.editTooltip = Редактирование метаданных
+# Label for enable AI autofill toggle switch
+boxui.metadataInstanceEditor.enableAIAutofill = Box AI Autofill
 # Label for enable cascade policy toggle switch
 boxui.metadataInstanceEditor.enableCascadePolicy = Включить каскадную политику
 # Message for users who may attempt to remove a custom metadata instance for a file. Also non-recoverable

package/i18n/sv-SE.js

@@ -605,6 +605,10 @@ export default {
   "boxui.itemDetails.url": "Webbadress",
   "boxui.itemDetails.urlPlaceholder": "Ange en giltig URL",
   "boxui.media.menuButtonArialLabel": "Alternativ",
+  "boxui.metadataInstanceEditor.aiAutofillDescription": "Use Box AI to automatically extract metadata values.",
+  "boxui.metadataInstanceEditor.aiAutofillLearnMore": "Läs mer",
+  "boxui.metadataInstanceEditor.aiAutofillNotice": "Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.",
+  "boxui.metadataInstanceEditor.aiAutofillPricingDetails": "pricing details",
   "boxui.metadataInstanceEditor.allAttributesAreHidden": "Alla attribut i den här mallen har dolts.",
   "boxui.metadataInstanceEditor.applyCascadePolicyText": "Använd mallen och mallvärdena för alla nya och befintliga objekt i den här mappen med undermappar.",
   "boxui.metadataInstanceEditor.cannotApplyCascadePolicyText": "Övergripande policy kan inte tillämpas på anpassade metadata just nu.",
@@ -625,6 +629,7 @@ export default {
   "boxui.metadataInstanceEditor.customValue": "Värde",
   "boxui.metadataInstanceEditor.customValuePlaceholder": "t.ex. 42",
   "boxui.metadataInstanceEditor.editTooltip": "Redigera metadata",
+  "boxui.metadataInstanceEditor.enableAIAutofill": "Box AI Autofill",
   "boxui.metadataInstanceEditor.enableCascadePolicy": "Aktivera övergripande policy",
   "boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm": "Är du säker på att du vill radera dessa anpassade metadata och alla tillhörande värden från den här filen?",
   "boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm": "Är du säker på att du vill radera \"{metadataName}\" och alla tillhörande värden från den här filen?",

package/i18n/sv-SE.properties

@@ -1210,6 +1210,14 @@ boxui.itemDetails.url = Webbadress
 boxui.itemDetails.urlPlaceholder = Ange en giltig URL
 # Label for comment options menu
 boxui.media.menuButtonArialLabel = Alternativ
+# Description for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillDescription = Use Box AI to automatically extract metadata values.
+# Learn more link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillLearnMore = Läs mer
+# Notice for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillNotice = Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.
+# Pricing details link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillPricingDetails = pricing details
 # Informational text below collapsible header indicating that all fields for this template are hidden
 boxui.metadataInstanceEditor.allAttributesAreHidden = Alla attribut i den här mallen har dolts.
 # Informational text below enable cascade policy toggle switch
@@ -1250,6 +1258,8 @@ boxui.metadataInstanceEditor.customValue = Värde
 boxui.metadataInstanceEditor.customValuePlaceholder = t.ex. 42
 # Text that shows in a tooltip above the edit pencil button.
 boxui.metadataInstanceEditor.editTooltip = Redigera metadata
+# Label for enable AI autofill toggle switch
+boxui.metadataInstanceEditor.enableAIAutofill = Box AI Autofill
 # Label for enable cascade policy toggle switch
 boxui.metadataInstanceEditor.enableCascadePolicy = Aktivera övergripande policy
 # Message for users who may attempt to remove a custom metadata instance for a file. Also non-recoverable

package/i18n/tr-TR.js

@@ -605,6 +605,10 @@ export default {
   "boxui.itemDetails.url": "URL",
   "boxui.itemDetails.urlPlaceholder": "Geçerli bir URL girin",
   "boxui.media.menuButtonArialLabel": "Seçenekler",
+  "boxui.metadataInstanceEditor.aiAutofillDescription": "Use Box AI to automatically extract metadata values.",
+  "boxui.metadataInstanceEditor.aiAutofillLearnMore": "Daha fazla bilgi edinin",
+  "boxui.metadataInstanceEditor.aiAutofillNotice": "Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.",
+  "boxui.metadataInstanceEditor.aiAutofillPricingDetails": "pricing details",
   "boxui.metadataInstanceEditor.allAttributesAreHidden": "Bu şablondaki tüm özellikler gizli.",
   "boxui.metadataInstanceEditor.applyCascadePolicyText": "Şablonu ve değerlerini, bu klasör ve alt klasörlerindeki tüm yeni ve mevcut öğelere uygulayın.",
   "boxui.metadataInstanceEditor.cannotApplyCascadePolicyText": "Alt klasörlere uygulama ilkesi şu anda özel meta verilere uygulanamıyor",
@@ -625,6 +629,7 @@ export default {
   "boxui.metadataInstanceEditor.customValue": "Değer",
   "boxui.metadataInstanceEditor.customValuePlaceholder": "ör. 42",
   "boxui.metadataInstanceEditor.editTooltip": "Meta Verileri Düzenle",
+  "boxui.metadataInstanceEditor.enableAIAutofill": "Box AI Autofill",
   "boxui.metadataInstanceEditor.enableCascadePolicy": "Alt Klasörlere Uygulama İlkesini Etkinleştir",
   "boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm": "Bu özel meta veriyi ve tüm değerlerini dosyadan silmek istediğinizden emin misiniz?",
   "boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm": "Bu \"{metadataName}\" öğesini ve tüm değerlerini bu dosyadan silmek istediğinizden emin misiniz?",

package/i18n/tr-TR.properties

@@ -1210,6 +1210,14 @@ boxui.itemDetails.url = URL
 boxui.itemDetails.urlPlaceholder = Geçerli bir URL girin
 # Label for comment options menu
 boxui.media.menuButtonArialLabel = Seçenekler
+# Description for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillDescription = Use Box AI to automatically extract metadata values.
+# Learn more link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillLearnMore = Daha fazla bilgi edinin
+# Notice for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillNotice = Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.
+# Pricing details link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillPricingDetails = pricing details
 # Informational text below collapsible header indicating that all fields for this template are hidden
 boxui.metadataInstanceEditor.allAttributesAreHidden = Bu şablondaki tüm özellikler gizli.
 # Informational text below enable cascade policy toggle switch
@@ -1250,6 +1258,8 @@ boxui.metadataInstanceEditor.customValue = Değer
 boxui.metadataInstanceEditor.customValuePlaceholder = ör. 42
 # Text that shows in a tooltip above the edit pencil button.
 boxui.metadataInstanceEditor.editTooltip = Meta Verileri Düzenle
+# Label for enable AI autofill toggle switch
+boxui.metadataInstanceEditor.enableAIAutofill = Box AI Autofill
 # Label for enable cascade policy toggle switch
 boxui.metadataInstanceEditor.enableCascadePolicy = Alt Klasörlere Uygulama İlkesini Etkinleştir
 # Message for users who may attempt to remove a custom metadata instance for a file. Also non-recoverable

package/i18n/zh-CN.js

@@ -605,6 +605,10 @@ export default {
   "boxui.itemDetails.url": "URL",
   "boxui.itemDetails.urlPlaceholder": "输入有效的 URL",
   "boxui.media.menuButtonArialLabel": "选项",
+  "boxui.metadataInstanceEditor.aiAutofillDescription": "Use Box AI to automatically extract metadata values.",
+  "boxui.metadataInstanceEditor.aiAutofillLearnMore": "了解更多",
+  "boxui.metadataInstanceEditor.aiAutofillNotice": "Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.",
+  "boxui.metadataInstanceEditor.aiAutofillPricingDetails": "pricing details",
   "boxui.metadataInstanceEditor.allAttributesAreHidden": "此模板中的所有属性都已隐藏。",
   "boxui.metadataInstanceEditor.applyCascadePolicyText": "将模板及其值应用于此文件夹及其子文件夹中的所有新项目和现有项目。",
   "boxui.metadataInstanceEditor.cannotApplyCascadePolicyText": "级联策略目前不适用于自定义元数据。",
@@ -625,6 +629,7 @@ export default {
   "boxui.metadataInstanceEditor.customValue": "值",
   "boxui.metadataInstanceEditor.customValuePlaceholder": "例如 42",
   "boxui.metadataInstanceEditor.editTooltip": "编辑元数据",
+  "boxui.metadataInstanceEditor.enableAIAutofill": "Box AI Autofill",
   "boxui.metadataInstanceEditor.enableCascadePolicy": "启用级联策略",
   "boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm": "是否确定要从此文件中删除此自定义元数据及其所有值？",
   "boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm": "是否确定要从此文件中删除 \"{metadataName}\" 及其所有值？",

package/i18n/zh-CN.properties

@@ -1210,6 +1210,14 @@ boxui.itemDetails.url = URL
 boxui.itemDetails.urlPlaceholder = 输入有效的 URL
 # Label for comment options menu
 boxui.media.menuButtonArialLabel = 选项
+# Description for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillDescription = Use Box AI to automatically extract metadata values.
+# Learn more link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillLearnMore = 了解更多
+# Notice for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillNotice = Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.
+# Pricing details link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillPricingDetails = pricing details
 # Informational text below collapsible header indicating that all fields for this template are hidden
 boxui.metadataInstanceEditor.allAttributesAreHidden = 此模板中的所有属性都已隐藏。
 # Informational text below enable cascade policy toggle switch
@@ -1250,6 +1258,8 @@ boxui.metadataInstanceEditor.customValue = 值
 boxui.metadataInstanceEditor.customValuePlaceholder = 例如 42
 # Text that shows in a tooltip above the edit pencil button.
 boxui.metadataInstanceEditor.editTooltip = 编辑元数据
+# Label for enable AI autofill toggle switch
+boxui.metadataInstanceEditor.enableAIAutofill = Box AI Autofill
 # Label for enable cascade policy toggle switch
 boxui.metadataInstanceEditor.enableCascadePolicy = 启用级联策略
 # Message for users who may attempt to remove a custom metadata instance for a file. Also non-recoverable

package/i18n/zh-TW.js

@@ -605,6 +605,10 @@ export default {
   "boxui.itemDetails.url": "URL",
   "boxui.itemDetails.urlPlaceholder": "輸入有效的 URL",
   "boxui.media.menuButtonArialLabel": "選項",
+  "boxui.metadataInstanceEditor.aiAutofillDescription": "Use Box AI to automatically extract metadata values.",
+  "boxui.metadataInstanceEditor.aiAutofillLearnMore": "詳細資訊",
+  "boxui.metadataInstanceEditor.aiAutofillNotice": "Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.",
+  "boxui.metadataInstanceEditor.aiAutofillPricingDetails": "pricing details",
   "boxui.metadataInstanceEditor.allAttributesAreHidden": "此範本中的所有屬性皆已隱藏。",
   "boxui.metadataInstanceEditor.applyCascadePolicyText": "將範本及其值套用到此資料夾和其子資料夾中的所有新項目與現有項目。",
   "boxui.metadataInstanceEditor.cannotApplyCascadePolicyText": "向下套用原則目前無法套用到自訂中繼資料。",
@@ -625,6 +629,7 @@ export default {
   "boxui.metadataInstanceEditor.customValue": "值",
   "boxui.metadataInstanceEditor.customValuePlaceholder": "例如 42",
   "boxui.metadataInstanceEditor.editTooltip": "編輯中繼資料",
+  "boxui.metadataInstanceEditor.enableAIAutofill": "Box AI Autofill",
   "boxui.metadataInstanceEditor.enableCascadePolicy": "啟用向下套用原則",
   "boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm": "確定要從此檔案刪除此自訂中繼資料及其所有值？",
   "boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm": "確定要從此檔案刪除「{metadataName}」及其所有值？",

package/i18n/zh-TW.properties

@@ -1210,6 +1210,14 @@ boxui.itemDetails.url = URL
 boxui.itemDetails.urlPlaceholder = 輸入有效的 URL
 # Label for comment options menu
 boxui.media.menuButtonArialLabel = 選項
+# Description for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillDescription = Use Box AI to automatically extract metadata values.
+# Learn more link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillLearnMore = 詳細資訊
+# Notice for AI autofill toggle switch
+boxui.metadataInstanceEditor.aiAutofillNotice = Enabling this feature may involve additional charges. Please review our {pricingLink} for more information.
+# Pricing details link for AI autofill
+boxui.metadataInstanceEditor.aiAutofillPricingDetails = pricing details
 # Informational text below collapsible header indicating that all fields for this template are hidden
 boxui.metadataInstanceEditor.allAttributesAreHidden = 此範本中的所有屬性皆已隱藏。
 # Informational text below enable cascade policy toggle switch
@@ -1250,6 +1258,8 @@ boxui.metadataInstanceEditor.customValue = 值
 boxui.metadataInstanceEditor.customValuePlaceholder = 例如 42
 # Text that shows in a tooltip above the edit pencil button.
 boxui.metadataInstanceEditor.editTooltip = 編輯中繼資料
+# Label for enable AI autofill toggle switch
+boxui.metadataInstanceEditor.enableAIAutofill = Box AI Autofill
 # Label for enable cascade policy toggle switch
 boxui.metadataInstanceEditor.enableCascadePolicy = 啟用向下套用原則
 # Message for users who may attempt to remove a custom metadata instance for a file. Also non-recoverable

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.3.0-beta.5",
+    "version": "23.3.0-beta.7",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -52,7 +52,7 @@
         "build:prod:dist": "NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "build:prod:examples": "LANGUAGE=en-US REACT=true NODE_ENV=production node --max_old_space_size=8192 node_modules/.bin/styleguidist build --config scripts/styleguide.config.js --mode production",
         "build:prod:npm": "BABEL_ENV=production OUTPUT=dist LANGUAGE=en-US REACT=true yarn build:prod:dist",
-        "build:prod:storybook": "LANGUAGE=en-US REACT=true BROWSERSLIST_ENV=production BABEL_ENV=development NODE_ENV=development storybook build -c .storybook -o styleguide/storybook",
+        "build:prod:storybook": "LANGUAGE=en-US REACT=true BROWSERSLIST_ENV=production BABEL_ENV=development NODE_ENV=development storybook build -c .storybook -o storybook",
         "build:sync": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development RSYNC=true webpack --config scripts/webpack.config.js --mode development",
         "chromatic": "chromatic",
         "clean": "rm -rf dist es i18n/json i18n/*.js reports styleguide",

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

@@ -2,6 +2,10 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+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';
 import { RadioButton, RadioGroup } from '../../components/radio';
 import Link from '../../components/link/Link';
@@ -10,12 +14,30 @@ import messages from './messages';
 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,
+    isAIFolderExtractionEnabled: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
     isCustomMetadata: boolean,
+    onAIFolderExtractionToggle: (value: boolean) => void,
     onCascadeModeChange: (value: boolean) => void,
     onCascadeToggle: (value: boolean) => void,
     shouldShowCascadeOptions: boolean,
@@ -23,9 +45,12 @@ type Props = {
 
 const CascadePolicy = ({
     canEdit,
+    canUseAIFolderExtraction,
     isCascadingEnabled,
     isCascadingOverwritten,
     isCustomMetadata,
+    isAIFolderExtractionEnabled,
+    onAIFolderExtractionToggle,
     onCascadeToggle,
     onCascadeModeChange,
     shouldShowCascadeOptions,
@@ -57,7 +82,7 @@ const CascadePolicy = ({
                         <div className="cascade-policy-text">
                             <FormattedMessage {...messages.applyCascadePolicyText} />
                             &nbsp;
-                            <Link className="cascade-policy-learnmore-link" href={COMMUNITY_LINK} target="_blank">
+                            <Link className="cascade-policy-link" href={COMMUNITY_LINK} target="_blank">
                                 <FormattedMessage {...messages.cascadePolicyLearnMore} />
                             </Link>
                         </div>
@@ -96,6 +121,52 @@ const CascadePolicy = ({
                     </div>
                 </div>
             )}
+            {shouldShowCascadeOptions && canUseAIFolderExtraction && (
+                <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} />
+                            <FormattedMessage tagName="strong" {...messages.enableAIAutofill} />
+                            <Toggle
+                                className="metadata-cascade-toggle"
+                                isOn={isAIFolderExtractionEnabled}
+                                label=""
+                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}
+                            />
+                        </div>
+                        <div className="cascade-policy-text">
+                            <FormattedMessage {...messages.aiAutofillDescription} />
+                            &nbsp;
+                            <Link className="cascade-policy-link" href={AI_LINK} target="_blank">
+                                <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}
+                                values={{
+                                    pricingLink: (
+                                        <Link className="cascade-policy-link" href={PRICING_LINK} target="_blank">
+                                            <FormattedMessage {...messages.aiAutofillPricingDetails} />
+                                        </Link>
+                                    ),
+                                }}
+                            />
+                        </InlineNotice>
+                    </div>
+                </div>
+            )}
         </>
     ) : (
         readOnlyState

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

@@ -40,6 +40,16 @@ $cascade-policy-background: #f1e2fd;
 .metadata-cascade-enable {
     margin: 10px 0;
     padding: 14px 15px;
+
+    .metadata-cascade-ai-logo {
+        position: relative;
+        top: 3px;
+        margin-right: 3px;
+    }
+
+    .metadata-cascade-ai-notice {
+        margin-top: 12px;
+    }
 }
 
 .toggle-container.metadata-cascade-toggle {
@@ -52,7 +62,7 @@ $cascade-policy-background: #f1e2fd;
     clear: left;
 }
 
-.cascade-policy-learnmore-link {
+.cascade-policy-link {
     color: $bdl-box-blue;
 }
 
@@ -68,3 +78,7 @@ $cascade-policy-background: #f1e2fd;
         }
     }
 }
+
+.metadata-cascade-ai-agent-selector {
+    margin-top: 4px;
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import CascadePolicy from './CascadePolicy';
+
+export const withoutAIMetadataExtraction = () => (
+    <CascadePolicy
+        canEdit
+        isCascadingEnabled
+        onCascadeModeChange={() => {}}
+        onCascadeToggle={() => {}}
+        shouldShowCascadeOptions
+    />
+);
+
+export const withAIMetadataExtraction = () => (
+    <CascadePolicy
+        canEdit
+        canUseAIFolderExtraction
+        isAIFolderExtractionEnabled
+        isCascadingEnabled
+        onAIFolderExtractionToggle={() => {}}
+        onCascadeModeChange={() => {}}
+        onCascadeToggle={() => {}}
+        shouldShowCascadeOptions
+    />
+);
+
+export default {
+    title: 'Features/Metadata Instance Editor/CascadePolicy',
+    component: CascadePolicy,
+};

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

@@ -47,6 +47,7 @@ import './Instance.scss';
 
 type Props = {
     canEdit: boolean,
+    canUseAIFolderExtraction?: boolean,
     cascadePolicy?: MetadataCascadePolicy, // eslint-disable-line
     data: MetadataFields,
     hasError: boolean,
@@ -69,6 +70,7 @@ type Props = {
 type State = {
     data: Object,
     errors: { [string]: React.Node },
+    isAIFolderExtractionEnabled: boolean,
     isBusy: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
@@ -327,21 +329,28 @@ class Instance extends React.PureComponent<Props, State> {
         );
     };
 
+    onAIFolderExtractionToggle = (value: boolean) => {
+        this.setState({ isAIFolderExtractionEnabled: value }, this.setDirty);
+    };
+
     /**
      * Returns the state from props
      *
      * @return {Object} - react state
      */
     getState(props: Props): State {
+        const isCascadingEnabled = this.isCascadingEnabled(props);
+
         return {
             data: cloneDeep(props.data),
             errors: {},
+            isAIFolderExtractionEnabled: false,
             isBusy: false,
-            isCascadingEnabled: this.isCascadingEnabled(props),
+            isCascadingEnabled,
             isCascadingOverwritten: false,
             isEditing: false,
             shouldConfirmRemove: false,
-            shouldShowCascadeOptions: false,
+            shouldShowCascadeOptions: isCascadingEnabled,
         };
     }
 
@@ -579,12 +588,20 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { cascadePolicy = {}, isDirty, isCascadingPolicyApplicable, isOpen, template }: Props = this.props;
+        const {
+            canUseAIFolderExtraction = false,
+            cascadePolicy = {},
+            isDirty,
+            isCascadingPolicyApplicable,
+            isOpen,
+            template,
+        }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
             errors,
             isBusy,
+            isAIFolderExtractionEnabled,
             isCascadingEnabled,
             shouldConfirmRemove,
             shouldShowCascadeOptions,
@@ -629,9 +646,12 @@ class Instance extends React.PureComponent<Props, State> {
                                     {isCascadingPolicyApplicable && (
                                         <CascadePolicy
                                             canEdit={isEditing && !!cascadePolicy.canEdit}
+                                            canUseAIFolderExtraction={canUseAIFolderExtraction}
+                                            isAIFolderExtractionEnabled={isAIFolderExtractionEnabled}
                                             isCascadingEnabled={isCascadingEnabled}
                                             isCascadingOverwritten={isCascadingOverwritten}
                                             isCustomMetadata={isProperties}
+                                            onAIFolderExtractionToggle={this.onAIFolderExtractionToggle}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}
                                             shouldShowCascadeOptions={shouldShowCascadeOptions}

package/src/features/metadata-instance-editor/Instances.js

@@ -6,6 +6,7 @@ import type { MetadataEditor, MetadataCascadingPolicyData } from '../../common/t
 import type { JSONPatchOperations } from '../../common/types/api';
 
 type Props = {
+    canUseAIFolderExtraction?: boolean,
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
@@ -20,6 +21,7 @@ type Props = {
 };
 
 const Instances = ({
+    canUseAIFolderExtraction = false,
     isCascadingPolicyApplicable = false,
     editors = [],
     onModification,
@@ -34,6 +36,7 @@ const Instances = ({
             return (
                 <Instance
                     canEdit={instance.canEdit}
+                    canUseAIFolderExtraction={canUseAIFolderExtraction}
                     cascadePolicy={instance.cascadePolicy}
                     data={instance.data}
                     hasError={hasError}

package/src/features/metadata-instance-editor/MetadataInstanceEditor.js

@@ -14,6 +14,7 @@ import './MetadataInstanceEditor.scss';
 type Props = {
     blurExceptionClassNames?: Array<string>,
     canAdd: boolean,
+    canUseAIFolderExtraction?: boolean,
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
@@ -35,6 +36,7 @@ type Props = {
 const MetadataInstanceEditor = ({
     blurExceptionClassNames,
     canAdd,
+    canUseAIFolderExtraction = false,
     isCascadingPolicyApplicable = false,
     isDropdownBusy,
     editors = [],
@@ -61,6 +63,7 @@ const MetadataInstanceEditor = ({
             ) : (
                 <ScrollWrapper>
                     <Instances
+                        canUseAIFolderExtraction={canUseAIFolderExtraction}
                         editors={editors}
                         isCascadingPolicyApplicable={isCascadingPolicyApplicable}
                         onModification={onModification}

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { screen, render, within } from '../../../test-utils/testing-library';
+
 import CascadePolicy from '../CascadePolicy';
 
 describe('features/metadata-instance-editor/CascadePolicy', () => {
@@ -48,4 +50,53 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
         );
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('should render AI folder extraction toggle when canEdit, canUseAIFolderExtraction, and shouldShowCascadeOptions are true', () => {
+        render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
+        expect(screen.getByText('Box AI Autofill')).toBeInTheDocument();
+    });
+
+    test.each([
+        [false, false, false],
+        [true, false, false],
+        [false, true, false],
+        [true, true, false],
+    ])(
+        'should not render AI folder extraction toggle when canEdit, canUseAIFolderExtraction, and shouldShowCascadeOptions are %s, %s, and %s',
+        (canEdit, canUseAIFolderExtraction, shouldShowCascadeOptions) => {
+            render(
+                <CascadePolicy
+                    canEdit={canEdit}
+                    canUseAIFolderExtraction={canUseAIFolderExtraction}
+                    shouldShowCascadeOptions={shouldShowCascadeOptions}
+                />,
+            );
+            expect(screen.queryByText('Box AI Autofill')).not.toBeInTheDocument();
+        },
+    );
+
+    describe('AI Autofill Links', () => {
+        test('should render AI and pricing links when AI features are enabled', () => {
+            render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
+
+            // Find link within the AI autofill section since there are two links with the same text in the component
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const aiLink = within(aiSection).getByText('Learn more');
+            expect(aiLink).toBeInTheDocument();
+            expect(aiLink.closest('a')).toHaveAttribute('href', 'https://www.box.com/ai');
+            expect(aiLink.closest('a')).toHaveAttribute('target', '_blank');
+
+            const pricingLink = screen.getByText('pricing details');
+            expect(pricingLink).toBeInTheDocument();
+            expect(pricingLink.closest('a')).toHaveAttribute('href', 'https://www.box.com/pricing');
+            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();
+        });
+    });
 });