@ai-stack/payloadcms 3.76.0-beta.1 → 3.76.0-beta.3

package/dist/ui/GlobalProviderOptions/index.jsx

@@ -0,0 +1,60 @@
+'use client';
+import { useField, useFormFields } from '@payloadcms/ui';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { ProviderOptionsTree } from '../InstructionProviderOptions/ProviderOptionsTree.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+export const GlobalProviderOptions = ({ path }) => {
+    const fieldPath = String(path || '');
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const schemaPath = `${groupPath}.schema`;
+    const providerField = useFormFields(([fields]) => fields[providerPath]);
+    const schemaField = useFormFields(([fields]) => fields[schemaPath]);
+    const provider = typeof providerField?.value === 'string' ? providerField.value : undefined;
+    const schemaByProvider = isRecord(schemaField?.value) ? schemaField.value : {};
+    const schema = provider && isRecord(schemaByProvider[provider]) ? schemaByProvider[provider] : null;
+    const { setValue: setProviderOptionsValue, value: providerOptionsValue } = useField({
+        path: fieldPath,
+    });
+    const handleOptionChange = useCallback((keyPath, targetValue) => {
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValue,
+            keyPath,
+            provider,
+            targetValue,
+        });
+        setProviderOptionsValue(nextValue);
+    }, [provider, providerOptionsValue, setProviderOptionsValue]);
+    if (!provider) {
+        return (<div className="field-type" style={{ marginTop: '1rem' }}>
+        <div className="field-label">Provider Options</div>
+        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>
+          Select a provider to configure provider options.
+        </p>
+      </div>);
+    }
+    if (!schema || Object.keys(schema).length === 0) {
+        return (<div className="field-type" style={{ marginTop: '1rem' }}>
+        <div className="field-label">Provider Options</div>
+        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>
+          No provider options schema exists for this provider and capability.
+        </p>
+      </div>);
+    }
+    const selectedProviderValues = isRecord(providerOptionsValue) && isRecord(providerOptionsValue[provider])
+        ? providerOptionsValue[provider]
+        : {};
+    return (<div className="field-type" style={{ marginTop: '1rem' }}>
+      <div className="field-label">Provider Options</div>
+      <p style={{ color: 'var(--theme-elevation-500)', marginBottom: '0.75rem', marginTop: 0 }}>
+        Configure default provider options for {provider}.
+      </p>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <ProviderOptionsTree onChange={handleOptionChange} path={[]} schemaValue={schema} selectedValue={selectedProviderValues}/>
+      </div>
+    </div>);
+};

package/dist/ui/Icons/Icons.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 import LottieAnimation from './LottieAnimation.js';
 export const PluginIcon = ({ color = 'white', isLoading })=>{
     return /*#__PURE__*/ _jsx("span", {

package/dist/ui/Icons/Icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Icons/Icons.tsx"],"sourcesContent":["import React from 'react'\n\nimport styles from './icons.module.css'\nimport LottieAnimation from './LottieAnimation.js'\n\nexport const PluginIcon = ({\n  color = 'white',\n  isLoading,\n}: {\n  color?: string\n  isLoading?: boolean\n}) => {\n  return (\n    <span className={styles.actions_icon}>\n      <LottieAnimation isLoading={isLoading} />\n    </span>\n  )\n}\n\nexport const TuneIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M450-130v-220h60v80h320v60H510v80h-60Zm-320-80v-60h220v60H130Zm160-160v-80H130v-60h160v-80h60v220h-60Zm160-80v-60h380v60H450Zm160-160v-220h60v80h160v60H670v80h-60Zm-480-80v-60h380v60H130Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const LocalLibraryIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M480-115.38q-67.38-54.93-148.85-86.7Q249.69-233.85 160-240v-373.85q91.77 5.39 174.38 43.81Q417-531.62 480-474.92q63-56.7 145.62-95.12 82.61-38.42 174.38-43.81V-240q-89.92 6.15-171.27 37.92-81.35 31.77-148.73 86.7Zm0-50.16q63-46.23 134-74.56 71-28.33 146-37.44v-291.38q-78.38 13-149.65 50.57-71.27 37.58-130.35 96.66-59.08-59.08-130.35-96.66-71.27-37.57-149.65-50.57v291.38q75 9.11 146 37.44t134 74.56Zm0-451.38q-53.31 0-91.27-37.96-37.96-37.97-37.96-91.27 0-53.31 37.96-91.27 37.96-37.96 91.27-37.96 53.31 0 91.27 37.96 37.96 37.96 37.96 91.27 0 53.3-37.96 91.27-37.96 37.96-91.27 37.96Zm.03-40q36.82 0 63.01-26.22 26.19-26.22 26.19-63.04t-26.22-63.01q-26.22-26.19-63.04-26.19t-63.01 26.21q-26.19 26.22-26.19 63.04t26.22 63.01q26.22 26.2 63.04 26.2Zm-.03-89.23Zm0 324.46Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SpellCheckIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M564-93.85 407.85-250 450-292.15l114 114 226.77-226.77 42.15 42.15L564-93.85ZM135.39-320l191.69-520h69.38l190.92 520h-68.92l-49.07-142H250.92l-49.84 142h-65.69ZM272-518h178.31L362-765.54h-3.23L272-518Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const TranslateIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m476-100 178.15-460h62.46l178.16 460h-63.62l-45.3-122H584.92l-45.31 122H476ZM160.38-217.69l-42.15-42.16 198.92-199.3q-34.61-35-65.8-83.08Q220.15-590.31 200-640h63.61q17.31 36.31 42.12 72.62 24.81 36.3 53.58 66.07 42.61-43 80.61-104.42T493.62-720H67.69v-60H330v-64.61h60V-780h262.31v60h-97.93q-19.46 67.38-62.03 140.88-42.58 73.5-90.89 121.2l98.69 101.07-22.69 61.62-118.15-121.16-198.93 198.7Zm443.77-57.39h162.46l-81.23-218.23-81.23 218.23Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const DocsAddOnIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M650-131v-120H530v-60h120v-120h60v120h120v60H710v120h-60ZM170-250v-60h281.85q-1.85 15.8-1.35 30.09t2.35 29.91H170Zm0-160v-60h379.08q-17.23 12.15-31.5 27.15-14.27 15-25.96 32.85H170Zm0-160v-60h580v60H170Zm0-160v-60h580v60H170Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SummarizeIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M320-603.85q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53ZM212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h419.23L820-631.54v419.23Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q5.39 0 8.85-3.46t3.46-8.85V-600H600v-160H212.31q-5.39 0-8.85 3.46t-3.46 8.85v535.38q0 5.39 3.46 8.85t8.85 3.46ZM200-760v160-160V-200v-560Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SegmentIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M380-254.62v-59.99h440v59.99H380ZM380-450v-60h440v60H380ZM140-645.39v-59.99h680v59.99H140Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const StylusNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m487.46-283.15 332.31-332.31q2.69-2.69 2.69-6.54t-2.69-6.54l-38.92-38.92q-2.7-2.69-6.54-2.69-3.85 0-6.54 2.69L435.46-335.15l52 52Zm-251 72.38q-89.23-5-134-39.69-44.77-34.69-44.77-98.16 0-60.76 51-98.57 51-37.81 141.77-45.81 43.62-3.77 65.43-15.77 21.8-12 21.8-33.23 0-29.46-29.5-44.96t-96.73-22.27l5.46-59.62q92.23 8.77 136.5 39.77 44.27 31 44.27 87.08 0 47.61-36.57 75.5-36.58 27.88-106.2 33.5-68.61 5.77-102.92 26.77t-34.31 57.61q0 37.31 28.58 55.51 28.58 18.19 92.65 22.34l-2.46 60Zm260.38 3.15L359.92-344.54l373.54-373.15q17.69-17.69 41.35-17.5 23.65.19 41.34 17.5L870-663.85q17.69 17.7 17.69 41.54 0 23.85-17.69 41.54L496.84-207.62ZM363.23-180q-13.54 3.23-23.84-7.08-10.31-10.31-7.08-23.84l27.61-133.62 136.92 136.92L363.23-180Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const EditNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M180-400v-60h280v60H180Zm0-160v-60h440v60H180Zm0-160v-60h440v60H180Zm344.62 540v-105.69l217.15-216.16q7.46-7.46 16.11-10.5 8.65-3.03 17.3-3.03 9.43 0 18.25 3.53 8.82 3.54 16.03 10.62l37 37.38q6.46 7.47 10 16.16Q860-439 860-430.31t-3.23 17.69q-3.23 9-10.31 16.46L630.31-180H524.62Zm287.69-250.31-37-37.38 37 37.38Zm-240 202.62h38l129.84-130.47-18.38-19-18.62-18.76-130.84 130.23v38Zm149.46-149.47-18.62-18.76 37 37.76-18.38-19Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const ArrowIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m531.69-480-184-184L376-692.31 588.31-480 376-267.69 347.69-296l184-184Z\" />\n      </svg>\n    </span>\n  )\n}\n"],"names":["React","styles","LottieAnimation","PluginIcon","color","isLoading","span","className","actions_icon","TuneIcon","size","icon","svg","height","viewBox","width","xmlns","path","d","LocalLibraryIcon","SpellCheckIcon","TranslateIcon","DocsAddOnIcon","SummarizeIcon","SegmentIcon","StylusNoteIcon","EditNoteIcon","ArrowIcon"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAOC,YAAY,qBAAoB;AACvC,OAAOC,qBAAqB,uBAAsB;AAElD,OAAO,MAAMC,aAAa,CAAC,EACzBC,QAAQ,OAAO,EACfC,SAAS,EAIV;IACC,qBACE,KAACC;QAAKC,WAAWN,OAAOO,YAAY;kBAClC,cAAA,KAACN;YAAgBG,WAAWA;;;AAGlC,EAAC;AAED,OAAO,MAAMI,WAAW,CAAC,EAAEL,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IACrD,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMC,mBAAmB,CAAC,EAAEf,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IAC7D,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAME,iBAAiB,CAAC,EAAEhB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IAC3D,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMG,gBAAgB,CAAC,EAAEjB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IAC1D,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMI,gBAAgB,CAAC,EAAElB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IAC1D,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMK,gBAAgB,CAAC,EAAEnB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IAC1D,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMM,cAAc,CAAC,EAAEpB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IACxD,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMO,iBAAiB,CAAC,EAAErB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IAC3D,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMQ,eAAe,CAAC,EAAEtB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IACzD,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC;AAED,OAAO,MAAMS,YAAY,CAAC,EAAEvB,QAAQ,OAAO,EAAEM,OAAO,EAAE,EAAE;IACtD,qBACE,KAACJ;QAAKC,WAAWN,OAAOU,IAAI;kBAC1B,cAAA,KAACC;YAAIC,QAAQH;YAAMI,SAAQ;YAAiBC,OAAOL;YAAMM,OAAM;sBAC7D,cAAA,KAACC;gBAAKC,GAAE;;;;AAIhB,EAAC"}
+{"version":3,"sources":["../../../src/ui/Icons/Icons.tsx"],"sourcesContent":["import React from 'react'\n\nimport styles from './icons.module.scss'\nimport LottieAnimation from './LottieAnimation.js'\n\nexport const PluginIcon = ({\n  color = 'white',\n  isLoading,\n}: {\n  color?: string\n  isLoading?: boolean\n}) => {\n  return (\n    <span className={styles.actions_icon}>\n      <LottieAnimation isLoading={isLoading} />\n    </span>\n  )\n}\n\nexport const TuneIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M450-130v-220h60v80h320v60H510v80h-60Zm-320-80v-60h220v60H130Zm160-160v-80H130v-60h160v-80h60v220h-60Zm160-80v-60h380v60H450Zm160-160v-220h60v80h160v60H670v80h-60Zm-480-80v-60h380v60H130Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const LocalLibraryIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M480-115.38q-67.38-54.93-148.85-86.7Q249.69-233.85 160-240v-373.85q91.77 5.39 174.38 43.81Q417-531.62 480-474.92q63-56.7 145.62-95.12 82.61-38.42 174.38-43.81V-240q-89.92 6.15-171.27 37.92-81.35 31.77-148.73 86.7Zm0-50.16q63-46.23 134-74.56 71-28.33 146-37.44v-291.38q-78.38 13-149.65 50.57-71.27 37.58-130.35 96.66-59.08-59.08-130.35-96.66-71.27-37.57-149.65-50.57v291.38q75 9.11 146 37.44t134 74.56Zm0-451.38q-53.31 0-91.27-37.96-37.96-37.97-37.96-91.27 0-53.31 37.96-91.27 37.96-37.96 91.27-37.96 53.31 0 91.27 37.96 37.96 37.96 37.96 91.27 0 53.3-37.96 91.27-37.96 37.96-91.27 37.96Zm.03-40q36.82 0 63.01-26.22 26.19-26.22 26.19-63.04t-26.22-63.01q-26.22-26.19-63.04-26.19t-63.01 26.21q-26.19 26.22-26.19 63.04t26.22 63.01q26.22 26.2 63.04 26.2Zm-.03-89.23Zm0 324.46Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SpellCheckIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M564-93.85 407.85-250 450-292.15l114 114 226.77-226.77 42.15 42.15L564-93.85ZM135.39-320l191.69-520h69.38l190.92 520h-68.92l-49.07-142H250.92l-49.84 142h-65.69ZM272-518h178.31L362-765.54h-3.23L272-518Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const TranslateIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m476-100 178.15-460h62.46l178.16 460h-63.62l-45.3-122H584.92l-45.31 122H476ZM160.38-217.69l-42.15-42.16 198.92-199.3q-34.61-35-65.8-83.08Q220.15-590.31 200-640h63.61q17.31 36.31 42.12 72.62 24.81 36.3 53.58 66.07 42.61-43 80.61-104.42T493.62-720H67.69v-60H330v-64.61h60V-780h262.31v60h-97.93q-19.46 67.38-62.03 140.88-42.58 73.5-90.89 121.2l98.69 101.07-22.69 61.62-118.15-121.16-198.93 198.7Zm443.77-57.39h162.46l-81.23-218.23-81.23 218.23Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const DocsAddOnIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M650-131v-120H530v-60h120v-120h60v120h120v60H710v120h-60ZM170-250v-60h281.85q-1.85 15.8-1.35 30.09t2.35 29.91H170Zm0-160v-60h379.08q-17.23 12.15-31.5 27.15-14.27 15-25.96 32.85H170Zm0-160v-60h580v60H170Zm0-160v-60h580v60H170Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SummarizeIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M320-603.85q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53ZM212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h419.23L820-631.54v419.23Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q5.39 0 8.85-3.46t3.46-8.85V-600H600v-160H212.31q-5.39 0-8.85 3.46t-3.46 8.85v535.38q0 5.39 3.46 8.85t8.85 3.46ZM200-760v160-160V-200v-560Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SegmentIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M380-254.62v-59.99h440v59.99H380ZM380-450v-60h440v60H380ZM140-645.39v-59.99h680v59.99H140Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const StylusNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m487.46-283.15 332.31-332.31q2.69-2.69 2.69-6.54t-2.69-6.54l-38.92-38.92q-2.7-2.69-6.54-2.69-3.85 0-6.54 2.69L435.46-335.15l52 52Zm-251 72.38q-89.23-5-134-39.69-44.77-34.69-44.77-98.16 0-60.76 51-98.57 51-37.81 141.77-45.81 43.62-3.77 65.43-15.77 21.8-12 21.8-33.23 0-29.46-29.5-44.96t-96.73-22.27l5.46-59.62q92.23 8.77 136.5 39.77 44.27 31 44.27 87.08 0 47.61-36.57 75.5-36.58 27.88-106.2 33.5-68.61 5.77-102.92 26.77t-34.31 57.61q0 37.31 28.58 55.51 28.58 18.19 92.65 22.34l-2.46 60Zm260.38 3.15L359.92-344.54l373.54-373.15q17.69-17.69 41.35-17.5 23.65.19 41.34 17.5L870-663.85q17.69 17.7 17.69 41.54 0 23.85-17.69 41.54L496.84-207.62ZM363.23-180q-13.54 3.23-23.84-7.08-10.31-10.31-7.08-23.84l27.61-133.62 136.92 136.92L363.23-180Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const EditNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M180-400v-60h280v60H180Zm0-160v-60h440v60H180Zm0-160v-60h440v60H180Zm344.62 540v-105.69l217.15-216.16q7.46-7.46 16.11-10.5 8.65-3.03 17.3-3.03 9.43 0 18.25 3.53 8.82 3.54 16.03 10.62l37 37.38q6.46 7.47 10 16.16Q860-439 860-430.31t-3.23 17.69q-3.23 9-10.31 16.46L630.31-180H524.62Zm287.69-250.31-37-37.38 37 37.38Zm-240 202.62h38l129.84-130.47-18.38-19-18.62-18.76-130.84 130.23v38Zm149.46-149.47-18.62-18.76 37 37.76-18.38-19Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const ArrowIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m531.69-480-184-184L376-692.31 588.31-480 376-267.69 347.69-296l184-184Z\" />\n      </svg>\n    </span>\n  )\n}\n"],"names":["React","styles","LottieAnimation","PluginIcon","color","isLoading","span","className","actions_icon","TuneIcon","size","icon","svg","height","viewBox","width","xmlns","path","d","LocalLibraryIcon","SpellCheckIcon","TranslateIcon","DocsAddOnIcon","SummarizeIcon","SegmentIcon","StylusNoteIcon","EditNoteIcon","ArrowIcon"],"mappings":"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"}

package/dist/ui/Icons/Icons.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 import LottieAnimation from './LottieAnimation.js';
 export const PluginIcon = ({ color = 'white', isLoading, }) => {
     return (<span className={styles.actions_icon}>

package/dist/ui/Icons/LottieAnimation.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 const LottieAnimation = ({ isLoading = false })=>{
     const svgRef = useRef(null);
     const [animations, setAnimations] = useState([]);

package/dist/ui/Icons/LottieAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Icons/LottieAnimation.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport styles from './icons.module.css'\n\nconst LottieAnimation = ({ isLoading = false }) => {\n  const svgRef = useRef(null)\n  const [animations, setAnimations] = useState([])\n\n  useEffect(() => {\n    const svg = svgRef.current\n    if (!svg) {return}\n\n    const animateTransform = (element, keyframes) => {\n      const animation = element.animate(keyframes, {\n        direction: 'alternate',\n        duration: 1000,\n        easing: 'ease-in-out',\n        iterations: Infinity,\n      })\n      return animation\n    }\n\n    // Animate Group 2 (Rectangle)\n    const rectangle = svg.querySelector('#group2')\n    const rectangleAnimation = animateTransform(rectangle, [\n      { transform: 'translate(0, 0) scale(1)' },\n      { transform: 'translate(0, 0) scale(2.54)' },\n      { transform: 'translate(0, 0) scale(1)' },\n    ])\n\n    // Animate Group 3 (Triangle)\n    const triangle = svg.querySelector('#group3')\n    const triangleAnimation = animateTransform(triangle, [\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n      { transform: 'translate(-70px, 73px) scale(0.36)' },\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n    ])\n\n    setAnimations([rectangleAnimation, triangleAnimation])\n\n    // Clean up animations on unmount\n    return () => {\n      rectangleAnimation.cancel()\n      triangleAnimation.cancel()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isLoading) {\n      animations.forEach((animation) => animation.play())\n    } else {\n      animations.forEach((animation) => animation.pause())\n    }\n  }, [isLoading, animations])\n\n  return (\n    <span\n      style={{\n        left: '3px',\n        position: 'relative',\n        top: '-6px',\n      }}\n    >\n      <svg height=\"41\" ref={svgRef} viewBox=\"-250 -250 500 500\" width=\"41\">\n        <g id=\"group2\">\n          <rect className={styles.color_fill} height=\"41\" width=\"41\" x=\"-20.5\" y=\"-20.5\" />\n        </g>\n        <g id=\"group3\">\n          <path className={styles.color_fill} d=\"M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z\" />\n        </g>\n      </svg>\n    </span>\n  )\n}\n\nexport default LottieAnimation\n"],"names":["React","useEffect","useRef","useState","styles","LottieAnimation","isLoading","svgRef","animations","setAnimations","svg","current","animateTransform","element","keyframes","animation","animate","direction","duration","easing","iterations","Infinity","rectangle","querySelector","rectangleAnimation","transform","triangle","triangleAnimation","cancel","forEach","play","pause","span","style","left","position","top","height","ref","viewBox","width","g","id","rect","className","color_fill","x","y","path","d"],"mappings":"AAAA,cAAc;;AAEd,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,OAAOC,YAAY,qBAAoB;AAEvC,MAAMC,kBAAkB,CAAC,EAAEC,YAAY,KAAK,EAAE;IAC5C,MAAMC,SAASL,OAAO;IACtB,MAAM,CAACM,YAAYC,cAAc,GAAGN,SAAS,EAAE;IAE/CF,UAAU;QACR,MAAMS,MAAMH,OAAOI,OAAO;QAC1B,IAAI,CAACD,KAAK;YAAC;QAAM;QAEjB,MAAME,mBAAmB,CAACC,SAASC;YACjC,MAAMC,YAAYF,QAAQG,OAAO,CAACF,WAAW;gBAC3CG,WAAW;gBACXC,UAAU;gBACVC,QAAQ;gBACRC,YAAYC;YACd;YACA,OAAON;QACT;QAEA,8BAA8B;QAC9B,MAAMO,YAAYZ,IAAIa,aAAa,CAAC;QACpC,MAAMC,qBAAqBZ,iBAAiBU,WAAW;YACrD;gBAAEG,WAAW;YAA2B;YACxC;gBAAEA,WAAW;YAA8B;YAC3C;gBAAEA,WAAW;YAA2B;SACzC;QAED,6BAA6B;QAC7B,MAAMC,WAAWhB,IAAIa,aAAa,CAAC;QACnC,MAAMI,oBAAoBf,iBAAiBc,UAAU;YACnD;gBAAED,WAAW;YAAsC;YACnD;gBAAEA,WAAW;YAAqC;YAClD;gBAAEA,WAAW;YAAsC;SACpD;QAEDhB,cAAc;YAACe;YAAoBG;SAAkB;QAErD,iCAAiC;QACjC,OAAO;YACLH,mBAAmBI,MAAM;YACzBD,kBAAkBC,MAAM;QAC1B;IACF,GAAG,EAAE;IAEL3B,UAAU;QACR,IAAIK,WAAW;YACbE,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUe,IAAI;QAClD,OAAO;YACLtB,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUgB,KAAK;QACnD;IACF,GAAG;QAACzB;QAAWE;KAAW;IAE1B,qBACE,KAACwB;QACCC,OAAO;YACLC,MAAM;YACNC,UAAU;YACVC,KAAK;QACP;kBAEA,cAAA,MAAC1B;YAAI2B,QAAO;YAAKC,KAAK/B;YAAQgC,SAAQ;YAAoBC,OAAM;;8BAC9D,KAACC;oBAAEC,IAAG;8BACJ,cAAA,KAACC;wBAAKC,WAAWxC,OAAOyC,UAAU;wBAAER,QAAO;wBAAKG,OAAM;wBAAKM,GAAE;wBAAQC,GAAE;;;8BAEzE,KAACN;oBAAEC,IAAG;8BACJ,cAAA,KAACM;wBAAKJ,WAAWxC,OAAOyC,UAAU;wBAAEI,GAAE;;;;;;AAKhD;AAEA,eAAe5C,gBAAe"}
+{"version":3,"sources":["../../../src/ui/Icons/LottieAnimation.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport styles from './icons.module.scss'\n\nconst LottieAnimation = ({ isLoading = false }) => {\n  const svgRef = useRef(null)\n  const [animations, setAnimations] = useState([])\n\n  useEffect(() => {\n    const svg = svgRef.current\n    if (!svg) {return}\n\n    const animateTransform = (element, keyframes) => {\n      const animation = element.animate(keyframes, {\n        direction: 'alternate',\n        duration: 1000,\n        easing: 'ease-in-out',\n        iterations: Infinity,\n      })\n      return animation\n    }\n\n    // Animate Group 2 (Rectangle)\n    const rectangle = svg.querySelector('#group2')\n    const rectangleAnimation = animateTransform(rectangle, [\n      { transform: 'translate(0, 0) scale(1)' },\n      { transform: 'translate(0, 0) scale(2.54)' },\n      { transform: 'translate(0, 0) scale(1)' },\n    ])\n\n    // Animate Group 3 (Triangle)\n    const triangle = svg.querySelector('#group3')\n    const triangleAnimation = animateTransform(triangle, [\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n      { transform: 'translate(-70px, 73px) scale(0.36)' },\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n    ])\n\n    setAnimations([rectangleAnimation, triangleAnimation])\n\n    // Clean up animations on unmount\n    return () => {\n      rectangleAnimation.cancel()\n      triangleAnimation.cancel()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isLoading) {\n      animations.forEach((animation) => animation.play())\n    } else {\n      animations.forEach((animation) => animation.pause())\n    }\n  }, [isLoading, animations])\n\n  return (\n    <span\n      style={{\n        left: '3px',\n        position: 'relative',\n        top: '-6px',\n      }}\n    >\n      <svg height=\"41\" ref={svgRef} viewBox=\"-250 -250 500 500\" width=\"41\">\n        <g id=\"group2\">\n          <rect className={styles.color_fill} height=\"41\" width=\"41\" x=\"-20.5\" y=\"-20.5\" />\n        </g>\n        <g id=\"group3\">\n          <path className={styles.color_fill} d=\"M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z\" />\n        </g>\n      </svg>\n    </span>\n  )\n}\n\nexport default LottieAnimation\n"],"names":["React","useEffect","useRef","useState","styles","LottieAnimation","isLoading","svgRef","animations","setAnimations","svg","current","animateTransform","element","keyframes","animation","animate","direction","duration","easing","iterations","Infinity","rectangle","querySelector","rectangleAnimation","transform","triangle","triangleAnimation","cancel","forEach","play","pause","span","style","left","position","top","height","ref","viewBox","width","g","id","rect","className","color_fill","x","y","path","d"],"mappings":"AAAA,cAAc;;AAEd,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,OAAOC,YAAY,sBAAqB;AAExC,MAAMC,kBAAkB,CAAC,EAAEC,YAAY,KAAK,EAAE;IAC5C,MAAMC,SAASL,OAAO;IACtB,MAAM,CAACM,YAAYC,cAAc,GAAGN,SAAS,EAAE;IAE/CF,UAAU;QACR,MAAMS,MAAMH,OAAOI,OAAO;QAC1B,IAAI,CAACD,KAAK;YAAC;QAAM;QAEjB,MAAME,mBAAmB,CAACC,SAASC;YACjC,MAAMC,YAAYF,QAAQG,OAAO,CAACF,WAAW;gBAC3CG,WAAW;gBACXC,UAAU;gBACVC,QAAQ;gBACRC,YAAYC;YACd;YACA,OAAON;QACT;QAEA,8BAA8B;QAC9B,MAAMO,YAAYZ,IAAIa,aAAa,CAAC;QACpC,MAAMC,qBAAqBZ,iBAAiBU,WAAW;YACrD;gBAAEG,WAAW;YAA2B;YACxC;gBAAEA,WAAW;YAA8B;YAC3C;gBAAEA,WAAW;YAA2B;SACzC;QAED,6BAA6B;QAC7B,MAAMC,WAAWhB,IAAIa,aAAa,CAAC;QACnC,MAAMI,oBAAoBf,iBAAiBc,UAAU;YACnD;gBAAED,WAAW;YAAsC;YACnD;gBAAEA,WAAW;YAAqC;YAClD;gBAAEA,WAAW;YAAsC;SACpD;QAEDhB,cAAc;YAACe;YAAoBG;SAAkB;QAErD,iCAAiC;QACjC,OAAO;YACLH,mBAAmBI,MAAM;YACzBD,kBAAkBC,MAAM;QAC1B;IACF,GAAG,EAAE;IAEL3B,UAAU;QACR,IAAIK,WAAW;YACbE,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUe,IAAI;QAClD,OAAO;YACLtB,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUgB,KAAK;QACnD;IACF,GAAG;QAACzB;QAAWE;KAAW;IAE1B,qBACE,KAACwB;QACCC,OAAO;YACLC,MAAM;YACNC,UAAU;YACVC,KAAK;QACP;kBAEA,cAAA,MAAC1B;YAAI2B,QAAO;YAAKC,KAAK/B;YAAQgC,SAAQ;YAAoBC,OAAM;;8BAC9D,KAACC;oBAAEC,IAAG;8BACJ,cAAA,KAACC;wBAAKC,WAAWxC,OAAOyC,UAAU;wBAAER,QAAO;wBAAKG,OAAM;wBAAKM,GAAE;wBAAQC,GAAE;;;8BAEzE,KAACN;oBAAEC,IAAG;8BACJ,cAAA,KAACM;wBAAKJ,WAAWxC,OAAOyC,UAAU;wBAAEI,GAAE;;;;;;AAKhD;AAEA,eAAe5C,gBAAe"}

package/dist/ui/Icons/LottieAnimation.jsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 const LottieAnimation = ({ isLoading = false }) => {
     const svgRef = useRef(null);
     const [animations, setAnimations] = useState([]);

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Primitive = boolean | null | number | string | undefined;
+type PrimitiveArray = number[] | string[];
+type ProviderOptionTreeNodeProps = {
+    disabled?: boolean;
+    onChange: (path: string[], value: any) => void;
+    path: string[];
+    schemaValue: Primitive | PrimitiveArray | Record<string, any>;
+    selectedValue: any;
+};
+export declare const ProviderOptionsTree: React.FC<ProviderOptionTreeNodeProps>;
+export {};

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput } from '@payloadcms/ui';
+import React from 'react';
+export const ProviderOptionsTree = ({ disabled, onChange, path, schemaValue, selectedValue })=>{
+    const nodeKey = path.length > 0 ? path[path.length - 1] : 'root';
+    const inputId = `po-${path.join('-')}`;
+    // Ensure path is properly passed when nested deeper than 1 level
+    if (schemaValue && typeof schemaValue === 'object' && !Array.isArray(schemaValue)) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "provider-options-group",
+            style: {
+                borderLeft: path.length > 0 ? '1px solid var(--theme-elevation-150)' : 'none',
+                display: 'grid',
+                gap: '1rem',
+                marginLeft: path.length > 0 ? '1rem' : '0',
+                paddingLeft: path.length > 0 ? '1rem' : '0'
+            },
+            children: [
+                path.length > 0 && /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    style: {
+                        fontWeight: 600,
+                        marginBottom: '-0.5rem'
+                    },
+                    children: nodeKey
+                }),
+                Object.entries(schemaValue).map(([key, childSchema])=>/*#__PURE__*/ _jsx(ProviderOptionsTree, {
+                        disabled: disabled,
+                        onChange: onChange,
+                        path: [
+                            ...path,
+                            key
+                        ],
+                        schemaValue: childSchema,
+                        selectedValue: selectedValue?.[key]
+                    }, key))
+            ]
+        });
+    }
+    // Handle Array as Select Menu options
+    if (Array.isArray(schemaValue)) {
+        const options = schemaValue.map((item)=>({
+                label: String(item),
+                value: String(item)
+            }));
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type select",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: inputId,
+                    children: nodeKey
+                }),
+                /*#__PURE__*/ _jsx(SelectInput, {
+                    isClearable: true,
+                    name: inputId,
+                    onChange: (selected)=>{
+                        if (selected && typeof selected === 'object' && 'value' in selected) {
+                            onChange(path, selected.value);
+                            return;
+                        }
+                        onChange(path, undefined);
+                    },
+                    options: options,
+                    path: inputId,
+                    readOnly: disabled,
+                    value: selectedValue !== undefined ? String(selectedValue) : undefined
+                })
+            ]
+        });
+    }
+    // Handle Boolean as Select Menu True/False
+    if (typeof schemaValue === 'boolean') {
+        const booleanOptions = [
+            {
+                label: 'True',
+                value: 'true'
+            },
+            {
+                label: 'False',
+                value: 'false'
+            }
+        ];
+        const stringVal = selectedValue === true ? 'true' : selectedValue === false ? 'false' : undefined;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type select",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: inputId,
+                    children: nodeKey
+                }),
+                /*#__PURE__*/ _jsx(SelectInput, {
+                    isClearable: true,
+                    name: inputId,
+                    onChange: (selected)=>{
+                        if (selected && typeof selected === 'object' && 'value' in selected) {
+                            onChange(path, selected.value === 'true');
+                            return;
+                        }
+                        onChange(path, undefined);
+                    },
+                    options: booleanOptions,
+                    path: inputId,
+                    readOnly: disabled,
+                    value: stringVal
+                })
+            ]
+        });
+    }
+    // Handle Number Input
+    if (typeof schemaValue === 'number') {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type number",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: inputId,
+                    children: nodeKey
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    disabled: disabled,
+                    id: inputId,
+                    name: inputId,
+                    onChange: (e)=>{
+                        const val = e.target.value;
+                        onChange(path, val === '' ? undefined : Number(val));
+                    },
+                    style: {
+                        width: '100%'
+                    },
+                    type: "number",
+                    value: typeof selectedValue === 'number' && !Number.isNaN(selectedValue) ? Number(selectedValue) : ''
+                })
+            ]
+        });
+    }
+    // Handle Text Input
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type text",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: inputId,
+                children: nodeKey
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                disabled: disabled,
+                id: inputId,
+                name: inputId,
+                onChange: (e)=>{
+                    const val = e.target.value;
+                    onChange(path, val.trim() === '' ? undefined : val);
+                },
+                style: {
+                    width: '100%'
+                },
+                type: "text",
+                value: typeof selectedValue === 'string' ? selectedValue : ''
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=ProviderOptionsTree.js.map

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/InstructionProviderOptions/ProviderOptionsTree.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\n\nimport { SelectInput } from '@payloadcms/ui'\nimport React from 'react'\n\ntype Primitive = boolean | null | number | string | undefined\ntype PrimitiveArray = number[] | string[]\n\ntype ProviderOptionTreeNodeProps = {\n  disabled?: boolean\n  onChange: (path: string[], value: any) => void\n  path: string[]\n  schemaValue: Primitive | PrimitiveArray | Record<string, any>\n  selectedValue: any\n}\n\nexport const ProviderOptionsTree: React.FC<ProviderOptionTreeNodeProps> = ({\n  disabled,\n  onChange,\n  path,\n  schemaValue,\n  selectedValue,\n}) => {\n  const nodeKey = path.length > 0 ? path[path.length - 1] : 'root'\n  const inputId = `po-${path.join('-')}`\n\n  // Ensure path is properly passed when nested deeper than 1 level\n  if (schemaValue && typeof schemaValue === 'object' && !Array.isArray(schemaValue)) {\n    return (\n      <div className=\"provider-options-group\" style={{ \n        borderLeft: path.length > 0 ? '1px solid var(--theme-elevation-150)' : 'none', \n        display: 'grid', \n        gap: '1rem', \n        marginLeft: path.length > 0 ? '1rem' : '0', \n        paddingLeft: path.length > 0 ? '1rem' : '0' \n      }}>\n        {path.length > 0 && <div className=\"field-label\" style={{ fontWeight: 600, marginBottom: '-0.5rem' }}>{nodeKey}</div>}\n        {Object.entries(schemaValue).map(([key, childSchema]) => (\n          <ProviderOptionsTree\n            disabled={disabled}\n            key={key}\n            onChange={onChange}\n            path={[...path, key]}\n            schemaValue={childSchema}\n            selectedValue={selectedValue?.[key]}\n          />\n        ))}\n      </div>\n    )\n  }\n\n  // Handle Array as Select Menu options\n  if (Array.isArray(schemaValue)) {\n    const options: OptionObject[] = schemaValue.map((item) => ({\n      label: String(item),\n      value: String(item),\n    }))\n\n    return (\n      <div className=\"field-type select\">\n        <label className=\"field-label\" htmlFor={inputId}>\n          {nodeKey}\n        </label>\n        <SelectInput\n          isClearable\n          name={inputId}\n          onChange={(selected) => {\n            if (selected && typeof selected === 'object' && 'value' in selected) {\n              onChange(path, (selected as OptionObject).value)\n              return\n            }\n            onChange(path, undefined)\n          }}\n          options={options}\n          path={inputId}\n          readOnly={disabled}\n          value={selectedValue !== undefined ? String(selectedValue) : undefined}\n        />\n      </div>\n    )\n  }\n\n  // Handle Boolean as Select Menu True/False\n  if (typeof schemaValue === 'boolean') {\n    const booleanOptions: OptionObject[] = [\n      { label: 'True', value: 'true' },\n      { label: 'False', value: 'false' },\n    ]\n    const stringVal = selectedValue === true ? 'true' : selectedValue === false ? 'false' : undefined\n\n    return (\n      <div className=\"field-type select\">\n        <label className=\"field-label\" htmlFor={inputId}>\n          {nodeKey}\n        </label>\n        <SelectInput\n          isClearable\n          name={inputId}\n          onChange={(selected) => {\n            if (selected && typeof selected === 'object' && 'value' in selected) {\n              onChange(path, (selected as OptionObject).value === 'true')\n              return\n            }\n            onChange(path, undefined)\n          }}\n          options={booleanOptions}\n          path={inputId}\n          readOnly={disabled}\n          value={stringVal}\n        />\n      </div>\n    )\n  }\n\n  // Handle Number Input\n  if (typeof schemaValue === 'number') {\n    return (\n      <div className=\"field-type number\">\n        <label className=\"field-label\" htmlFor={inputId}>\n          {nodeKey}\n        </label>\n        <input\n          disabled={disabled}\n          id={inputId}\n          name={inputId}\n          onChange={(e) => {\n            const val = e.target.value\n            onChange(path, val === '' ? undefined : Number(val))\n          }}\n          style={{ width: '100%' }}\n          type=\"number\"\n          value={\n            typeof selectedValue === 'number' && !Number.isNaN(selectedValue)\n              ? Number(selectedValue)\n              : ''\n          }\n        />\n      </div>\n    )\n  }\n\n  // Handle Text Input\n  return (\n    <div className=\"field-type text\">\n      <label className=\"field-label\" htmlFor={inputId}>\n        {nodeKey}\n      </label>\n      <input\n        disabled={disabled}\n        id={inputId}\n        name={inputId}\n        onChange={(e) => {\n          const val = e.target.value\n          onChange(path, val.trim() === '' ? undefined : val)\n        }}\n        style={{ width: '100%' }}\n        type=\"text\"\n        value={typeof selectedValue === 'string' ? selectedValue : ''}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","React","ProviderOptionsTree","disabled","onChange","path","schemaValue","selectedValue","nodeKey","length","inputId","join","Array","isArray","div","className","style","borderLeft","display","gap","marginLeft","paddingLeft","fontWeight","marginBottom","Object","entries","map","key","childSchema","options","item","label","String","value","htmlFor","isClearable","name","selected","undefined","readOnly","booleanOptions","stringVal","input","id","e","val","target","Number","width","type","isNaN","trim"],"mappings":"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"}

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.jsx

@@ -0,0 +1,83 @@
+'use client';
+import { SelectInput } from '@payloadcms/ui';
+import React from 'react';
+export const ProviderOptionsTree = ({ disabled, onChange, path, schemaValue, selectedValue, }) => {
+    const nodeKey = path.length > 0 ? path[path.length - 1] : 'root';
+    const inputId = `po-${path.join('-')}`;
+    // Ensure path is properly passed when nested deeper than 1 level
+    if (schemaValue && typeof schemaValue === 'object' && !Array.isArray(schemaValue)) {
+        return (<div className="provider-options-group" style={{
+                borderLeft: path.length > 0 ? '1px solid var(--theme-elevation-150)' : 'none',
+                display: 'grid',
+                gap: '1rem',
+                marginLeft: path.length > 0 ? '1rem' : '0',
+                paddingLeft: path.length > 0 ? '1rem' : '0'
+            }}>
+        {path.length > 0 && <div className="field-label" style={{ fontWeight: 600, marginBottom: '-0.5rem' }}>{nodeKey}</div>}
+        {Object.entries(schemaValue).map(([key, childSchema]) => (<ProviderOptionsTree disabled={disabled} key={key} onChange={onChange} path={[...path, key]} schemaValue={childSchema} selectedValue={selectedValue?.[key]}/>))}
+      </div>);
+    }
+    // Handle Array as Select Menu options
+    if (Array.isArray(schemaValue)) {
+        const options = schemaValue.map((item) => ({
+            label: String(item),
+            value: String(item),
+        }));
+        return (<div className="field-type select">
+        <label className="field-label" htmlFor={inputId}>
+          {nodeKey}
+        </label>
+        <SelectInput isClearable name={inputId} onChange={(selected) => {
+                if (selected && typeof selected === 'object' && 'value' in selected) {
+                    onChange(path, selected.value);
+                    return;
+                }
+                onChange(path, undefined);
+            }} options={options} path={inputId} readOnly={disabled} value={selectedValue !== undefined ? String(selectedValue) : undefined}/>
+      </div>);
+    }
+    // Handle Boolean as Select Menu True/False
+    if (typeof schemaValue === 'boolean') {
+        const booleanOptions = [
+            { label: 'True', value: 'true' },
+            { label: 'False', value: 'false' },
+        ];
+        const stringVal = selectedValue === true ? 'true' : selectedValue === false ? 'false' : undefined;
+        return (<div className="field-type select">
+        <label className="field-label" htmlFor={inputId}>
+          {nodeKey}
+        </label>
+        <SelectInput isClearable name={inputId} onChange={(selected) => {
+                if (selected && typeof selected === 'object' && 'value' in selected) {
+                    onChange(path, selected.value === 'true');
+                    return;
+                }
+                onChange(path, undefined);
+            }} options={booleanOptions} path={inputId} readOnly={disabled} value={stringVal}/>
+      </div>);
+    }
+    // Handle Number Input
+    if (typeof schemaValue === 'number') {
+        return (<div className="field-type number">
+        <label className="field-label" htmlFor={inputId}>
+          {nodeKey}
+        </label>
+        <input disabled={disabled} id={inputId} name={inputId} onChange={(e) => {
+                const val = e.target.value;
+                onChange(path, val === '' ? undefined : Number(val));
+            }} style={{ width: '100%' }} type="number" value={typeof selectedValue === 'number' && !Number.isNaN(selectedValue)
+                ? Number(selectedValue)
+                : ''}/>
+      </div>);
+    }
+    // Handle Text Input
+    return (<div className="field-type text">
+      <label className="field-label" htmlFor={inputId}>
+        {nodeKey}
+      </label>
+      <input disabled={disabled} id={inputId} name={inputId} onChange={(e) => {
+            const val = e.target.value;
+            onChange(path, val.trim() === '' ? undefined : val);
+        }} style={{ width: '100%' }} type="text" value={typeof selectedValue === 'string' ? selectedValue : ''}/>
+    </div>);
+};

package/dist/ui/InstructionProviderOptions/index.d.ts

@@ -0,0 +1,2 @@
+import type { FieldClientComponent } from 'payload';
+export declare const InstructionProviderOptions: FieldClientComponent;

package/dist/ui/InstructionProviderOptions/index.js

@@ -0,0 +1,157 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useFormFields } from '@payloadcms/ui';
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+import { ProviderOptionsTree } from './ProviderOptionsTree.js';
+function inferUseCase(fieldPath) {
+    const parentName = fieldPath.split('.').slice(-2)[0];
+    if (parentName === 'image-settings') {
+        return 'image';
+    }
+    if (parentName === 'tts-settings') {
+        return 'tts';
+    }
+    if (parentName === 'video-settings') {
+        return 'video';
+    }
+    return 'text';
+}
+export const InstructionProviderOptions = ({ path })=>{
+    const { data: aiSettings } = useAISettings();
+    const fieldPath = path || '';
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const useCase = useMemo(()=>inferUseCase(fieldPath), [
+        fieldPath
+    ]);
+    const providerField = useFormFields(([fields])=>fields[providerPath]);
+    const provider = providerField?.value;
+    const { setValue: setProviderOptionsValues, value: providerOptionsValues } = useField({
+        path: fieldPath
+    });
+    // 1. Find the provider's schema for this use case
+    const schema = useMemo(()=>{
+        if (!provider || !aiSettings?.defaults) {
+            return null;
+        }
+        const useCaseDefaults = aiSettings.defaults[useCase];
+        // We stored the raw schema object directly under schemas[provider] during autoSetup
+        const schemas = useCaseDefaults?.schema;
+        return schemas?.[provider] || null;
+    }, [
+        aiSettings,
+        provider,
+        useCase
+    ]);
+    const providerLabel = useMemo(()=>{
+        if (!provider) {
+            return undefined;
+        }
+        const providers = Array.isArray(aiSettings?.providers) ? aiSettings.providers : [];
+        const configuredProvider = providers.find((item)=>item && typeof item === 'object' && 'blockType' in item && item.blockType === provider);
+        if (configuredProvider?.providerName) {
+            return configuredProvider.providerName;
+        }
+        return provider;
+    }, [
+        aiSettings?.providers,
+        provider
+    ]);
+    const handleOptionChange = useCallback((keyPath, targetValue)=>{
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValues,
+            keyPath,
+            provider,
+            targetValue
+        });
+        setProviderOptionsValues(nextValue);
+    }, [
+        providerOptionsValues,
+        provider,
+        setProviderOptionsValues
+    ]);
+    if (!provider) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type",
+            style: {
+                marginTop: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    children: "Provider Options"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        margin: 0
+                    },
+                    children: "Select a provider to configure provider options."
+                })
+            ]
+        });
+    }
+    if (!schema || typeof schema !== 'object' || Object.keys(schema).length === 0) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type",
+            style: {
+                marginTop: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    children: "Provider Options"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        margin: 0
+                    },
+                    children: "No provider options are configured for this provider and capability."
+                })
+            ]
+        });
+    }
+    const selectedProviderValues = providerOptionsValues?.[provider] || {};
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type",
+        style: {
+            marginTop: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "field-label",
+                children: "Provider Options"
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                style: {
+                    color: 'var(--theme-elevation-500)',
+                    marginBottom: '0.75rem',
+                    marginTop: 0
+                },
+                children: [
+                    "Override ",
+                    providerLabel || provider,
+                    " provider options for this field."
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column'
+                },
+                children: /*#__PURE__*/ _jsx(ProviderOptionsTree, {
+                    onChange: handleOptionChange,
+                    path: [],
+                    schemaValue: schema,
+                    selectedValue: selectedProviderValues
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/InstructionProviderOptions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/InstructionProviderOptions/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldClientComponent } from 'payload'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\n\nimport { useAISettings } from '../hooks/useAISettings.js'\nimport { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js'\nimport { ProviderOptionsTree } from './ProviderOptionsTree.js'\n\nfunction inferUseCase(fieldPath: string): 'image' | 'text' | 'tts' | 'video' {\n  const parentName = fieldPath.split('.').slice(-2)[0]\n\n  if (parentName === 'image-settings') {\n    return 'image'\n  }\n  if (parentName === 'tts-settings') {\n    return 'tts'\n  }\n  if (parentName === 'video-settings') {\n    return 'video'\n  }\n\n  return 'text'\n}\n\nexport const InstructionProviderOptions: FieldClientComponent = ({ path }) => {\n  const { data: aiSettings } = useAISettings()\n\n  const fieldPath = (path as string) || ''\n  const groupPath = fieldPath.split('.').slice(0, -1).join('.')\n  const providerPath = `${groupPath}.provider`\n  const useCase = useMemo(() => inferUseCase(fieldPath), [fieldPath])\n\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const provider = providerField?.value as string | undefined\n\n  const { setValue: setProviderOptionsValues, value: providerOptionsValues } = useField<unknown>({\n    path: fieldPath,\n  })\n\n  // 1. Find the provider's schema for this use case\n  const schema = useMemo(() => {\n    if (!provider || !aiSettings?.defaults) {\n      return null\n    }\n    const useCaseDefaults = (aiSettings.defaults as Record<string, unknown>)[useCase] as Record<\n      string,\n      unknown\n    >\n    // We stored the raw schema object directly under schemas[provider] during autoSetup\n    const schemas = useCaseDefaults?.schema as Record<string, unknown> | undefined\n    return schemas?.[provider] || null\n  }, [aiSettings, provider, useCase])\n\n  const providerLabel = useMemo(() => {\n    if (!provider) {\n      return undefined\n    }\n\n    const providers = Array.isArray(aiSettings?.providers) ? aiSettings.providers : []\n    const configuredProvider = providers.find(\n      (item) =>\n        item &&\n        typeof item === 'object' &&\n        'blockType' in item &&\n        (item as { blockType?: unknown }).blockType === provider,\n    ) as { providerName?: string } | undefined\n\n    if (configuredProvider?.providerName) {\n      return configuredProvider.providerName\n    }\n\n    return provider\n  }, [aiSettings?.providers, provider])\n\n  const handleOptionChange = useCallback(\n    (keyPath: string[], targetValue: unknown) => {\n      const nextValue = updateProviderOptionsValue({\n        currentValue: providerOptionsValues,\n        keyPath,\n        provider,\n        targetValue,\n      })\n      setProviderOptionsValues(nextValue)\n    },\n    [providerOptionsValues, provider, setProviderOptionsValues],\n  )\n\n  if (!provider) {\n    return (\n      <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n        <div className=\"field-label\">Provider Options</div>\n        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>\n          Select a provider to configure provider options.\n        </p>\n      </div>\n    )\n  }\n\n  if (!schema || typeof schema !== 'object' || Object.keys(schema).length === 0) {\n    return (\n      <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n        <div className=\"field-label\">Provider Options</div>\n        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>\n          No provider options are configured for this provider and capability.\n        </p>\n      </div>\n    )\n  }\n\n  const selectedProviderValues = (providerOptionsValues as Record<string, any>)?.[provider] || {}\n\n  return (\n    <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n      <div className=\"field-label\">Provider Options</div>\n      <p style={{ color: 'var(--theme-elevation-500)', marginBottom: '0.75rem', marginTop: 0 }}>\n        Override {providerLabel || provider} provider options for this field.\n      </p>\n\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <ProviderOptionsTree\n          onChange={handleOptionChange}\n          path={[]}\n          schemaValue={schema}\n          selectedValue={selectedProviderValues}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useFormFields","React","useCallback","useMemo","useAISettings","updateProviderOptionsValue","ProviderOptionsTree","inferUseCase","fieldPath","parentName","split","slice","InstructionProviderOptions","path","data","aiSettings","groupPath","join","providerPath","useCase","providerField","fields","provider","value","setValue","setProviderOptionsValues","providerOptionsValues","schema","defaults","useCaseDefaults","schemas","providerLabel","undefined","providers","Array","isArray","configuredProvider","find","item","blockType","providerName","handleOptionChange","keyPath","targetValue","nextValue","currentValue","div","className","style","marginTop","p","color","margin","Object","keys","length","selectedProviderValues","marginBottom","display","flexDirection","onChange","schemaValue","selectedValue"],"mappings":"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"}