@ai-stack/payloadcms 3.2.26 → 3.68.0-beta.2

package/dist/ui/ModelRowLabel/index.jsx

@@ -0,0 +1,26 @@
+'use client';
+import { useRowLabel } from '@payloadcms/ui';
+import React from 'react';
+/**
+ * Generic Model Row Label component for provider blocks
+ * Displays model name with enabled status badge
+ */
+export const ModelRowLabel = () => {
+    const { data, rowNumber } = useRowLabel();
+    const displayName = data?.name || data?.id || `Model ${rowNumber}`;
+    const isEnabled = data?.enabled !== false;
+    return (<div style={{ alignItems: 'center', display: 'flex', gap: '10px' }}>
+      <span style={{ fontWeight: '500' }}>{displayName}</span>
+      <span style={{
+            backgroundColor: isEnabled ? 'var(--theme-success-100)' : 'var(--theme-elevation-200)',
+            borderRadius: '4px',
+            color: isEnabled ? 'var(--theme-success-700)' : 'var(--theme-elevation-600)',
+            fontSize: '11px',
+            fontWeight: '600',
+            padding: '2px 8px',
+            textTransform: 'uppercase',
+        }}>
+        {isEnabled ? '●Enabled' : 'Disabled'}
+      </span>
+    </div>);
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ProviderOptionsEditorProps {
+    name?: string;
+    path: string;
+}
+export declare const ProviderOptionsEditor: React.FC<ProviderOptionsEditorProps>;
+export {};

package/dist/ui/ProviderOptionsEditor/index.js

@@ -0,0 +1,291 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RenderFields, useField, useFormFields } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+/**
+ * Find a field by name within a block's fields, searching through tabs
+ */ function findFieldInBlock(block, fieldName) {
+    const searchFields = (fields)=>{
+        for (const field of fields){
+            if ('name' in field && field.name === fieldName) {
+                return field;
+            }
+            if (field.type === 'tabs' && 'tabs' in field) {
+                for (const tab of field.tabs){
+                    const found = searchFields(tab.fields);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            if (field.type === 'group' && 'fields' in field) {
+                const found = searchFields(field.fields);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    };
+    return searchFields(block.fields);
+}
+/**
+ * Get provider options fields for a given provider and use case
+ */ function getProviderOptionsFields(providerSlug, useCase) {
+    const block = allProviderBlocks.find((b)=>b.slug === providerSlug);
+    if (!block) {
+        return [];
+    }
+    const groupName = `${useCase}ProviderOptions`;
+    const optionsGroup = findFieldInBlock(block, groupName);
+    if (optionsGroup && optionsGroup.type === 'group' && 'fields' in optionsGroup) {
+        return optionsGroup.fields;
+    }
+    return [];
+}
+export const ProviderOptionsEditor = (props)=>{
+    const { path } = props;
+    // Get parent path to find sibling provider field
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    const providerField = useFormFields(([fields])=>fields[`${parentPath}.provider`]);
+    const provider = providerField?.value;
+    // Infer use case from path
+    // Handles:
+    // - AISettings: 'defaults.text.options' -> useCase is 'text'
+    // - Instructions: 'text-settings.providerOptions' -> useCase is 'text'
+    const useCase = useMemo(()=>{
+        // Check for AISettings paths first (e.g., 'defaults.text.options')
+        const pathParts = path.split('.');
+        const parentName = pathParts[pathParts.length - 2];
+        if ([
+            'image',
+            'text',
+            'tts',
+            'video'
+        ].includes(parentName)) {
+            return parentName;
+        }
+        // Check for Instructions paths
+        if (path.includes('tts-settings')) {
+            return 'tts';
+        }
+        if (path.includes('image-settings')) {
+            return 'image';
+        }
+        if (path.includes('video-settings')) {
+            return 'video';
+        }
+        return 'text';
+    }, [
+        path
+    ]);
+    const { setValue, value } = useField({
+        path
+    });
+    const [aiSettings, setAiSettings] = useState(null);
+    // Fetch AI Settings to get current provider defaults
+    useEffect(()=>{
+        fetch('/api/globals/ai-settings?depth=1').then((res)=>res.json()).then((data)=>setAiSettings(data)).catch((err)=>console.error('Error fetching AI settings:', err));
+    }, []);
+    // Get the configured default options from AI Settings for this provider
+    const configuredDefaults = useMemo(()=>{
+        if (!provider || !aiSettings) {
+            return null;
+        }
+        const providerBlock = aiSettings.providers?.find((p)=>p.blockType === provider && p.enabled);
+        if (!providerBlock) {
+            return null;
+        }
+        // Get provider options by use case
+        const optionsKey = `${useCase}ProviderOptions`;
+        return providerBlock[optionsKey] || null;
+    }, [
+        provider,
+        useCase,
+        aiSettings
+    ]);
+    // Get field definitions from provider block
+    const fields = useMemo(()=>{
+        if (!provider) {
+            return [];
+        }
+        return getProviderOptionsFields(provider, useCase);
+    }, [
+        provider,
+        useCase
+    ]);
+    // Check if there are any overrides set
+    const hasOverrides = useMemo(()=>{
+        return value && Object.keys(value).length > 0;
+    }, [
+        value
+    ]);
+    if (!provider) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "field-type",
+            style: {
+                padding: '12px 0'
+            },
+            children: /*#__PURE__*/ _jsx("p", {
+                style: {
+                    color: 'var(--theme-elevation-600)',
+                    fontSize: '13px',
+                    margin: 0
+                },
+                children: "Please select a provider first to configure options."
+            })
+        });
+    }
+    if (fields.length === 0) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "field-type",
+            style: {
+                padding: '12px 0'
+            },
+            children: /*#__PURE__*/ _jsxs("p", {
+                style: {
+                    color: 'var(--theme-elevation-600)',
+                    fontSize: '13px',
+                    margin: 0
+                },
+                children: [
+                    "No configurable options available for ",
+                    provider,
+                    " (",
+                    useCase,
+                    ")."
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type provider-options-editor",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginBottom: '16px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        className: "field-label",
+                        style: {
+                            display: 'block',
+                            marginBottom: '8px'
+                        },
+                        children: "Provider Options"
+                    }),
+                    configuredDefaults && /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            background: 'var(--theme-elevation-50)',
+                            border: '1px solid var(--theme-elevation-100)',
+                            borderRadius: '4px',
+                            fontSize: '12px',
+                            marginBottom: '12px',
+                            padding: '12px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    marginBottom: '8px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        style: {
+                                            color: 'var(--theme-elevation-800)'
+                                        },
+                                        children: "Defaults from AI Settings"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            background: 'var(--theme-elevation-100)',
+                                            borderRadius: '10px',
+                                            color: 'var(--theme-elevation-500)',
+                                            fontSize: '11px',
+                                            padding: '2px 8px'
+                                        },
+                                        children: "Inherited"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    color: 'var(--theme-elevation-600)',
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    gap: '8px'
+                                },
+                                children: Object.entries(configuredDefaults).map(([key, val])=>{
+                                    // Skip nested objects for display
+                                    if (typeof val === 'object' && val !== null) {
+                                        return null;
+                                    }
+                                    return /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            background: 'var(--theme-elevation-100)',
+                                            borderRadius: '3px',
+                                            fontSize: '11px',
+                                            padding: '2px 6px'
+                                        },
+                                        children: [
+                                            key,
+                                            ": ",
+                                            /*#__PURE__*/ _jsx("strong", {
+                                                children: String(val)
+                                            })
+                                        ]
+                                    }, key);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            color: 'var(--theme-elevation-500)',
+                            fontSize: '12px',
+                            fontStyle: 'italic',
+                            marginBottom: '12px'
+                        },
+                        children: "Override defaults for this specific field. Empty values inherit from AI Settings."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(RenderFields, {
+                fields: fields,
+                forceRender: true,
+                margins: "small",
+                parentIndexPath: "",
+                parentPath: path,
+                parentSchemaPath: path,
+                permissions: true
+            }),
+            hasOverrides && /*#__PURE__*/ _jsx("button", {
+                onClick: ()=>setValue({}),
+                onMouseEnter: (e)=>{
+                    e.currentTarget.style.background = 'var(--theme-elevation-100)';
+                },
+                onMouseLeave: (e)=>{
+                    e.currentTarget.style.background = 'transparent';
+                },
+                style: {
+                    background: 'transparent',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-text)',
+                    cursor: 'pointer',
+                    fontSize: '13px',
+                    marginTop: '12px',
+                    padding: '8px 16px',
+                    transition: 'all 0.15s ease'
+                },
+                type: "button",
+                children: "Reset to Defaults"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/ProviderOptionsEditor/index.tsx"],"sourcesContent":["'use client'\n\nimport { RenderFields, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\n\ntype UseCase = 'image' | 'text' | 'tts' | 'video'\n\ninterface ProviderOptionsEditorProps {\n  name?: string\n  path: string\n}\n\n/**\n * Find a field by name within a block's fields, searching through tabs\n */\nfunction findFieldInBlock(block: any, fieldName: string): any | undefined {\n  const searchFields = (fields: any[]): any | undefined => {\n    for (const field of fields) {\n      if ('name' in field && field.name === fieldName) {\n        return field\n      }\n      if (field.type === 'tabs' && 'tabs' in field) {\n        for (const tab of field.tabs) {\n          const found = searchFields(tab.fields)\n          if (found) {\n            return found\n          }\n        }\n      }\n      if (field.type === 'group' && 'fields' in field) {\n        const found = searchFields(field.fields)\n        if (found) {\n          return found\n        }\n      }\n    }\n    return undefined\n  }\n\n  return searchFields(block.fields)\n}\n\n/**\n * Get provider options fields for a given provider and use case\n */\nfunction getProviderOptionsFields(providerSlug: string, useCase: UseCase): any[] {\n  const block = allProviderBlocks.find((b) => b.slug === providerSlug)\n  if (!block) {\n    return []\n  }\n\n  const groupName = `${useCase}ProviderOptions`\n  const optionsGroup = findFieldInBlock(block, groupName)\n\n  if (optionsGroup && optionsGroup.type === 'group' && 'fields' in optionsGroup) {\n    return optionsGroup.fields\n  }\n\n  return []\n}\n\nexport const ProviderOptionsEditor: React.FC<ProviderOptionsEditorProps> = (props) => {\n  const { path } = props\n\n  // Get parent path to find sibling provider field\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  const providerField = useFormFields(([fields]) => fields[`${parentPath}.provider`])\n  const provider = providerField?.value as string\n\n  // Infer use case from path\n  // Handles:\n  // - AISettings: 'defaults.text.options' -> useCase is 'text'\n  // - Instructions: 'text-settings.providerOptions' -> useCase is 'text'\n  const useCase: UseCase = useMemo(() => {\n    // Check for AISettings paths first (e.g., 'defaults.text.options')\n    const pathParts = path.split('.')\n    const parentName = pathParts[pathParts.length - 2]\n\n    if (['image', 'text', 'tts', 'video'].includes(parentName)) {\n      return parentName as UseCase\n    }\n\n    // Check for Instructions paths\n    if (path.includes('tts-settings')) {\n      return 'tts'\n    }\n    if (path.includes('image-settings')) {\n      return 'image'\n    }\n    if (path.includes('video-settings')) {\n      return 'video'\n    }\n    return 'text'\n  }, [path])\n\n  const { setValue, value } = useField<Record<string, any>>({ path })\n  const [aiSettings, setAiSettings] = useState<any>(null)\n\n  // Fetch AI Settings to get current provider defaults\n  useEffect(() => {\n    fetch('/api/globals/ai-settings?depth=1')\n      .then((res) => res.json())\n      .then((data) => setAiSettings(data))\n      .catch((err) => console.error('Error fetching AI settings:', err))\n  }, [])\n\n  // Get the configured default options from AI Settings for this provider\n  const configuredDefaults = useMemo(() => {\n    if (!provider || !aiSettings) {\n      return null\n    }\n\n    const providerBlock = aiSettings.providers?.find(\n      (p: any) => p.blockType === provider && p.enabled,\n    )\n    if (!providerBlock) {\n      return null\n    }\n\n    // Get provider options by use case\n    const optionsKey = `${useCase}ProviderOptions`\n    return providerBlock[optionsKey] || null\n  }, [provider, useCase, aiSettings])\n\n  // Get field definitions from provider block\n  const fields = useMemo(() => {\n    if (!provider) {\n      return []\n    }\n    return getProviderOptionsFields(provider, useCase)\n  }, [provider, useCase])\n\n  // Check if there are any overrides set\n  const hasOverrides = useMemo(() => {\n    return value && Object.keys(value).length > 0\n  }, [value])\n\n  if (!provider) {\n    return (\n      <div className=\"field-type\" style={{ padding: '12px 0' }}>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px', margin: 0 }}>\n          Please select a provider first to configure options.\n        </p>\n      </div>\n    )\n  }\n\n  if (fields.length === 0) {\n    return (\n      <div className=\"field-type\" style={{ padding: '12px 0' }}>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px', margin: 0 }}>\n          No configurable options available for {provider} ({useCase}).\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type provider-options-editor\">\n      <div style={{ marginBottom: '16px' }}>\n        <label className=\"field-label\" style={{ display: 'block', marginBottom: '8px' }}>\n          Provider Options\n        </label>\n\n        {configuredDefaults && (\n          <div\n            style={{\n              background: 'var(--theme-elevation-50)',\n              border: '1px solid var(--theme-elevation-100)',\n              borderRadius: '4px',\n              fontSize: '12px',\n              marginBottom: '12px',\n              padding: '12px',\n            }}\n          >\n            <div\n              style={{\n                alignItems: 'center',\n                display: 'flex',\n                justifyContent: 'space-between',\n                marginBottom: '8px',\n              }}\n            >\n              <strong style={{ color: 'var(--theme-elevation-800)' }}>\n                Defaults from AI Settings\n              </strong>\n              <span\n                style={{\n                  background: 'var(--theme-elevation-100)',\n                  borderRadius: '10px',\n                  color: 'var(--theme-elevation-500)',\n                  fontSize: '11px',\n                  padding: '2px 8px',\n                }}\n              >\n                Inherited\n              </span>\n            </div>\n            <div\n              style={{\n                color: 'var(--theme-elevation-600)',\n                display: 'flex',\n                flexWrap: 'wrap',\n                gap: '8px',\n              }}\n            >\n              {Object.entries(configuredDefaults).map(([key, val]) => {\n                // Skip nested objects for display\n                if (typeof val === 'object' && val !== null) {\n                  return null\n                }\n                return (\n                  <span\n                    key={key}\n                    style={{\n                      background: 'var(--theme-elevation-100)',\n                      borderRadius: '3px',\n                      fontSize: '11px',\n                      padding: '2px 6px',\n                    }}\n                  >\n                    {key}: <strong>{String(val)}</strong>\n                  </span>\n                )\n              })}\n            </div>\n          </div>\n        )}\n\n        <p\n          style={{\n            color: 'var(--theme-elevation-500)',\n            fontSize: '12px',\n            fontStyle: 'italic',\n            marginBottom: '12px',\n          }}\n        >\n          Override defaults for this specific field. Empty values inherit from AI Settings.\n        </p>\n      </div>\n\n      <RenderFields\n        fields={fields}\n        forceRender\n        margins=\"small\"\n        parentIndexPath=\"\"\n        parentPath={path}\n        parentSchemaPath={path}\n        permissions={true}\n      />\n\n      {hasOverrides && (\n        <button\n          onClick={() => setValue({})}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = 'var(--theme-elevation-100)'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = 'transparent'\n          }}\n          style={{\n            background: 'transparent',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-text)',\n            cursor: 'pointer',\n            fontSize: '13px',\n            marginTop: '12px',\n            padding: '8px 16px',\n            transition: 'all 0.15s ease',\n          }}\n          type=\"button\"\n        >\n          Reset to Defaults\n        </button>\n      )}\n    </div>\n  )\n}\n"],"names":["RenderFields","useField","useFormFields","React","useEffect","useMemo","useState","allProviderBlocks","findFieldInBlock","block","fieldName","searchFields","fields","field","name","type","tab","tabs","found","undefined","getProviderOptionsFields","providerSlug","useCase","find","b","slug","groupName","optionsGroup","ProviderOptionsEditor","props","path","parentPath","split","slice","join","providerField","provider","value","pathParts","parentName","length","includes","setValue","aiSettings","setAiSettings","fetch","then","res","json","data","catch","err","console","error","configuredDefaults","providerBlock","providers","p","blockType","enabled","optionsKey","hasOverrides","Object","keys","div","className","style","padding","color","fontSize","margin","marginBottom","label","display","background","border","borderRadius","alignItems","justifyContent","strong","span","flexWrap","gap","entries","map","key","val","String","fontStyle","forceRender","margins","parentIndexPath","parentSchemaPath","permissions","button","onClick","onMouseEnter","e","currentTarget","onMouseLeave","cursor","marginTop","transition"],"mappings":"AAAA;;AAEA,SAASA,YAAY,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACtE,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAE3D,SAASC,iBAAiB,QAAQ,qCAAoC;AAStE;;CAEC,GACD,SAASC,iBAAiBC,KAAU,EAAEC,SAAiB;IACrD,MAAMC,eAAe,CAACC;QACpB,KAAK,MAAMC,SAASD,OAAQ;YAC1B,IAAI,UAAUC,SAASA,MAAMC,IAAI,KAAKJ,WAAW;gBAC/C,OAAOG;YACT;YACA,IAAIA,MAAME,IAAI,KAAK,UAAU,UAAUF,OAAO;gBAC5C,KAAK,MAAMG,OAAOH,MAAMI,IAAI,CAAE;oBAC5B,MAAMC,QAAQP,aAAaK,IAAIJ,MAAM;oBACrC,IAAIM,OAAO;wBACT,OAAOA;oBACT;gBACF;YACF;YACA,IAAIL,MAAME,IAAI,KAAK,WAAW,YAAYF,OAAO;gBAC/C,MAAMK,QAAQP,aAAaE,MAAMD,MAAM;gBACvC,IAAIM,OAAO;oBACT,OAAOA;gBACT;YACF;QACF;QACA,OAAOC;IACT;IAEA,OAAOR,aAAaF,MAAMG,MAAM;AAClC;AAEA;;CAEC,GACD,SAASQ,yBAAyBC,YAAoB,EAAEC,OAAgB;IACtE,MAAMb,QAAQF,kBAAkBgB,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAKJ;IACvD,IAAI,CAACZ,OAAO;QACV,OAAO,EAAE;IACX;IAEA,MAAMiB,YAAY,CAAC,EAAEJ,QAAQ,eAAe,CAAC;IAC7C,MAAMK,eAAenB,iBAAiBC,OAAOiB;IAE7C,IAAIC,gBAAgBA,aAAaZ,IAAI,KAAK,WAAW,YAAYY,cAAc;QAC7E,OAAOA,aAAaf,MAAM;IAC5B;IAEA,OAAO,EAAE;AACX;AAEA,OAAO,MAAMgB,wBAA8D,CAACC;IAC1E,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,iDAAiD;IACjD,MAAME,aAAaD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACrD,MAAMC,gBAAgBjC,cAAc,CAAC,CAACU,OAAO,GAAKA,MAAM,CAAC,CAAC,EAAEmB,WAAW,SAAS,CAAC,CAAC;IAClF,MAAMK,WAAWD,eAAeE;IAEhC,2BAA2B;IAC3B,WAAW;IACX,6DAA6D;IAC7D,uEAAuE;IACvE,MAAMf,UAAmBjB,QAAQ;QAC/B,mEAAmE;QACnE,MAAMiC,YAAYR,KAAKE,KAAK,CAAC;QAC7B,MAAMO,aAAaD,SAAS,CAACA,UAAUE,MAAM,GAAG,EAAE;QAElD,IAAI;YAAC;YAAS;YAAQ;YAAO;SAAQ,CAACC,QAAQ,CAACF,aAAa;YAC1D,OAAOA;QACT;QAEA,+BAA+B;QAC/B,IAAIT,KAAKW,QAAQ,CAAC,iBAAiB;YACjC,OAAO;QACT;QACA,IAAIX,KAAKW,QAAQ,CAAC,mBAAmB;YACnC,OAAO;QACT;QACA,IAAIX,KAAKW,QAAQ,CAAC,mBAAmB;YACnC,OAAO;QACT;QACA,OAAO;IACT,GAAG;QAACX;KAAK;IAET,MAAM,EAAEY,QAAQ,EAAEL,KAAK,EAAE,GAAGpC,SAA8B;QAAE6B;IAAK;IACjE,MAAM,CAACa,YAAYC,cAAc,GAAGtC,SAAc;IAElD,qDAAqD;IACrDF,UAAU;QACRyC,MAAM,oCACHC,IAAI,CAAC,CAACC,MAAQA,IAAIC,IAAI,IACtBF,IAAI,CAAC,CAACG,OAASL,cAAcK,OAC7BC,KAAK,CAAC,CAACC,MAAQC,QAAQC,KAAK,CAAC,+BAA+BF;IACjE,GAAG,EAAE;IAEL,wEAAwE;IACxE,MAAMG,qBAAqBjD,QAAQ;QACjC,IAAI,CAAC+B,YAAY,CAACO,YAAY;YAC5B,OAAO;QACT;QAEA,MAAMY,gBAAgBZ,WAAWa,SAAS,EAAEjC,KAC1C,CAACkC,IAAWA,EAAEC,SAAS,KAAKtB,YAAYqB,EAAEE,OAAO;QAEnD,IAAI,CAACJ,eAAe;YAClB,OAAO;QACT;QAEA,mCAAmC;QACnC,MAAMK,aAAa,CAAC,EAAEtC,QAAQ,eAAe,CAAC;QAC9C,OAAOiC,aAAa,CAACK,WAAW,IAAI;IACtC,GAAG;QAACxB;QAAUd;QAASqB;KAAW;IAElC,4CAA4C;IAC5C,MAAM/B,SAASP,QAAQ;QACrB,IAAI,CAAC+B,UAAU;YACb,OAAO,EAAE;QACX;QACA,OAAOhB,yBAAyBgB,UAAUd;IAC5C,GAAG;QAACc;QAAUd;KAAQ;IAEtB,uCAAuC;IACvC,MAAMuC,eAAexD,QAAQ;QAC3B,OAAOgC,SAASyB,OAAOC,IAAI,CAAC1B,OAAOG,MAAM,GAAG;IAC9C,GAAG;QAACH;KAAM;IAEV,IAAI,CAACD,UAAU;QACb,qBACE,KAAC4B;YAAIC,WAAU;YAAaC,OAAO;gBAAEC,SAAS;YAAS;sBACrD,cAAA,KAACV;gBAAES,OAAO;oBAAEE,OAAO;oBAA8BC,UAAU;oBAAQC,QAAQ;gBAAE;0BAAG;;;IAKtF;IAEA,IAAI1D,OAAO4B,MAAM,KAAK,GAAG;QACvB,qBACE,KAACwB;YAAIC,WAAU;YAAaC,OAAO;gBAAEC,SAAS;YAAS;sBACrD,cAAA,MAACV;gBAAES,OAAO;oBAAEE,OAAO;oBAA8BC,UAAU;oBAAQC,QAAQ;gBAAE;;oBAAG;oBACvClC;oBAAS;oBAAGd;oBAAQ;;;;IAInE;IAEA,qBACE,MAAC0C;QAAIC,WAAU;;0BACb,MAACD;gBAAIE,OAAO;oBAAEK,cAAc;gBAAO;;kCACjC,KAACC;wBAAMP,WAAU;wBAAcC,OAAO;4BAAEO,SAAS;4BAASF,cAAc;wBAAM;kCAAG;;oBAIhFjB,oCACC,MAACU;wBACCE,OAAO;4BACLQ,YAAY;4BACZC,QAAQ;4BACRC,cAAc;4BACdP,UAAU;4BACVE,cAAc;4BACdJ,SAAS;wBACX;;0CAEA,MAACH;gCACCE,OAAO;oCACLW,YAAY;oCACZJ,SAAS;oCACTK,gBAAgB;oCAChBP,cAAc;gCAChB;;kDAEA,KAACQ;wCAAOb,OAAO;4CAAEE,OAAO;wCAA6B;kDAAG;;kDAGxD,KAACY;wCACCd,OAAO;4CACLQ,YAAY;4CACZE,cAAc;4CACdR,OAAO;4CACPC,UAAU;4CACVF,SAAS;wCACX;kDACD;;;;0CAIH,KAACH;gCACCE,OAAO;oCACLE,OAAO;oCACPK,SAAS;oCACTQ,UAAU;oCACVC,KAAK;gCACP;0CAECpB,OAAOqB,OAAO,CAAC7B,oBAAoB8B,GAAG,CAAC,CAAC,CAACC,KAAKC,IAAI;oCACjD,kCAAkC;oCAClC,IAAI,OAAOA,QAAQ,YAAYA,QAAQ,MAAM;wCAC3C,OAAO;oCACT;oCACA,qBACE,MAACN;wCAECd,OAAO;4CACLQ,YAAY;4CACZE,cAAc;4CACdP,UAAU;4CACVF,SAAS;wCACX;;4CAECkB;4CAAI;0DAAE,KAACN;0DAAQQ,OAAOD;;;uCARlBD;gCAWX;;;;kCAKN,KAAC5B;wBACCS,OAAO;4BACLE,OAAO;4BACPC,UAAU;4BACVmB,WAAW;4BACXjB,cAAc;wBAChB;kCACD;;;;0BAKH,KAACvE;gBACCY,QAAQA;gBACR6E,WAAW;gBACXC,SAAQ;gBACRC,iBAAgB;gBAChB5D,YAAYD;gBACZ8D,kBAAkB9D;gBAClB+D,aAAa;;YAGdhC,8BACC,KAACiC;gBACCC,SAAS,IAAMrD,SAAS,CAAC;gBACzBsD,cAAc,CAACC;oBACbA,EAAEC,aAAa,CAAChC,KAAK,CAACQ,UAAU,GAAG;gBACrC;gBACAyB,cAAc,CAACF;oBACbA,EAAEC,aAAa,CAAChC,KAAK,CAACQ,UAAU,GAAG;gBACrC;gBACAR,OAAO;oBACLQ,YAAY;oBACZC,QAAQ;oBACRC,cAAc;oBACdR,OAAO;oBACPgC,QAAQ;oBACR/B,UAAU;oBACVgC,WAAW;oBACXlC,SAAS;oBACTmC,YAAY;gBACd;gBACAvF,MAAK;0BACN;;;;AAMT,EAAC"}

package/dist/ui/ProviderOptionsEditor/index.jsx

@@ -0,0 +1,210 @@
+'use client';
+import { RenderFields, useField, useFormFields } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+/**
+ * Find a field by name within a block's fields, searching through tabs
+ */
+function findFieldInBlock(block, fieldName) {
+    const searchFields = (fields) => {
+        for (const field of fields) {
+            if ('name' in field && field.name === fieldName) {
+                return field;
+            }
+            if (field.type === 'tabs' && 'tabs' in field) {
+                for (const tab of field.tabs) {
+                    const found = searchFields(tab.fields);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            if (field.type === 'group' && 'fields' in field) {
+                const found = searchFields(field.fields);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    };
+    return searchFields(block.fields);
+}
+/**
+ * Get provider options fields for a given provider and use case
+ */
+function getProviderOptionsFields(providerSlug, useCase) {
+    const block = allProviderBlocks.find((b) => b.slug === providerSlug);
+    if (!block) {
+        return [];
+    }
+    const groupName = `${useCase}ProviderOptions`;
+    const optionsGroup = findFieldInBlock(block, groupName);
+    if (optionsGroup && optionsGroup.type === 'group' && 'fields' in optionsGroup) {
+        return optionsGroup.fields;
+    }
+    return [];
+}
+export const ProviderOptionsEditor = (props) => {
+    const { path } = props;
+    // Get parent path to find sibling provider field
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    const providerField = useFormFields(([fields]) => fields[`${parentPath}.provider`]);
+    const provider = providerField?.value;
+    // Infer use case from path
+    // Handles:
+    // - AISettings: 'defaults.text.options' -> useCase is 'text'
+    // - Instructions: 'text-settings.providerOptions' -> useCase is 'text'
+    const useCase = useMemo(() => {
+        // Check for AISettings paths first (e.g., 'defaults.text.options')
+        const pathParts = path.split('.');
+        const parentName = pathParts[pathParts.length - 2];
+        if (['image', 'text', 'tts', 'video'].includes(parentName)) {
+            return parentName;
+        }
+        // Check for Instructions paths
+        if (path.includes('tts-settings')) {
+            return 'tts';
+        }
+        if (path.includes('image-settings')) {
+            return 'image';
+        }
+        if (path.includes('video-settings')) {
+            return 'video';
+        }
+        return 'text';
+    }, [path]);
+    const { setValue, value } = useField({ path });
+    const [aiSettings, setAiSettings] = useState(null);
+    // Fetch AI Settings to get current provider defaults
+    useEffect(() => {
+        fetch('/api/globals/ai-settings?depth=1')
+            .then((res) => res.json())
+            .then((data) => setAiSettings(data))
+            .catch((err) => console.error('Error fetching AI settings:', err));
+    }, []);
+    // Get the configured default options from AI Settings for this provider
+    const configuredDefaults = useMemo(() => {
+        if (!provider || !aiSettings) {
+            return null;
+        }
+        const providerBlock = aiSettings.providers?.find((p) => p.blockType === provider && p.enabled);
+        if (!providerBlock) {
+            return null;
+        }
+        // Get provider options by use case
+        const optionsKey = `${useCase}ProviderOptions`;
+        return providerBlock[optionsKey] || null;
+    }, [provider, useCase, aiSettings]);
+    // Get field definitions from provider block
+    const fields = useMemo(() => {
+        if (!provider) {
+            return [];
+        }
+        return getProviderOptionsFields(provider, useCase);
+    }, [provider, useCase]);
+    // Check if there are any overrides set
+    const hasOverrides = useMemo(() => {
+        return value && Object.keys(value).length > 0;
+    }, [value]);
+    if (!provider) {
+        return (<div className="field-type" style={{ padding: '12px 0' }}>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px', margin: 0 }}>
+          Please select a provider first to configure options.
+        </p>
+      </div>);
+    }
+    if (fields.length === 0) {
+        return (<div className="field-type" style={{ padding: '12px 0' }}>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px', margin: 0 }}>
+          No configurable options available for {provider} ({useCase}).
+        </p>
+      </div>);
+    }
+    return (<div className="field-type provider-options-editor">
+      <div style={{ marginBottom: '16px' }}>
+        <label className="field-label" style={{ display: 'block', marginBottom: '8px' }}>
+          Provider Options
+        </label>
+
+        {configuredDefaults && (<div style={{
+                background: 'var(--theme-elevation-50)',
+                border: '1px solid var(--theme-elevation-100)',
+                borderRadius: '4px',
+                fontSize: '12px',
+                marginBottom: '12px',
+                padding: '12px',
+            }}>
+            <div style={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: '8px',
+            }}>
+              <strong style={{ color: 'var(--theme-elevation-800)' }}>
+                Defaults from AI Settings
+              </strong>
+              <span style={{
+                background: 'var(--theme-elevation-100)',
+                borderRadius: '10px',
+                color: 'var(--theme-elevation-500)',
+                fontSize: '11px',
+                padding: '2px 8px',
+            }}>
+                Inherited
+              </span>
+            </div>
+            <div style={{
+                color: 'var(--theme-elevation-600)',
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '8px',
+            }}>
+              {Object.entries(configuredDefaults).map(([key, val]) => {
+                // Skip nested objects for display
+                if (typeof val === 'object' && val !== null) {
+                    return null;
+                }
+                return (<span key={key} style={{
+                        background: 'var(--theme-elevation-100)',
+                        borderRadius: '3px',
+                        fontSize: '11px',
+                        padding: '2px 6px',
+                    }}>
+                    {key}: <strong>{String(val)}</strong>
+                  </span>);
+            })}
+            </div>
+          </div>)}
+
+        <p style={{
+            color: 'var(--theme-elevation-500)',
+            fontSize: '12px',
+            fontStyle: 'italic',
+            marginBottom: '12px',
+        }}>
+          Override defaults for this specific field. Empty values inherit from AI Settings.
+        </p>
+      </div>
+
+      <RenderFields fields={fields} forceRender margins="small" parentIndexPath="" parentPath={path} parentSchemaPath={path} permissions={true}/>
+
+      {hasOverrides && (<button onClick={() => setValue({})} onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'var(--theme-elevation-100)';
+            }} onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent';
+            }} style={{
+                background: 'transparent',
+                border: '1px solid var(--theme-elevation-200)',
+                borderRadius: '4px',
+                color: 'var(--theme-text)',
+                cursor: 'pointer',
+                fontSize: '13px',
+                marginTop: '12px',
+                padding: '8px 16px',
+                transition: 'all 0.15s ease',
+            }} type="button">
+          Reset to Defaults
+        </button>)}
+    </div>);
+};

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

@@ -0,0 +1,7 @@
+import type { FieldClientComponent } from 'payload';
+/**
+ * VoicesFetcher Component
+ * Fetches voices from ElevenLabs API (server-side) and populates the voices array field
+ * SECURE: API key is never exposed to the client
+ */
+export declare const VoicesFetcher: FieldClientComponent;