@ai-stack/payloadcms 3.2.24-beta → 3.68.0

package/dist/ui/DynamicModelSelect/index.jsx

@@ -0,0 +1,207 @@
+'use client';
+import { SelectInput, 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);
+}
+/**
+ * Infer use case from field path
+ * Handles both:
+ * - AISettings paths: 'defaults.text.model', 'defaults.image.model'
+ * - Instructions paths: 'text-settings.model', 'image-settings.model'
+ */
+function inferUseCase(path) {
+    const pathParts = path.split('.');
+    const parentName = pathParts[pathParts.length - 2];
+    // AISettings: 'defaults.text.model' -> parentName is 'text'
+    // Direct use case names
+    if (['image', 'text', 'tts', 'video'].includes(parentName)) {
+        return parentName;
+    }
+    // Instructions: 'text-settings.model' -> parentName is 'text-settings'
+    if (parentName === 'image-settings') {
+        return 'image';
+    }
+    if (parentName === 'tts-settings') {
+        return 'tts';
+    }
+    if (parentName === 'text-settings' || parentName === 'richtext-settings') {
+        return 'text';
+    }
+    if (parentName === 'video-settings') {
+        return 'video';
+    }
+    // Default to text
+    return 'text';
+}
+export const DynamicModelSelect = (props) => {
+    const { name, path } = props;
+    // Getting the 'provider' sibling field value
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    const providerPath = `${parentPath}.provider`;
+    const providerField = useFormFields(([fields]) => fields[providerPath]);
+    const providerValue = providerField?.value;
+    // Get all form fields to search for live provider configuration (for AISettings context)
+    // We filter to only 'providers' fields to avoid unnecessary re-renders, 
+    // but note that the selector runs on every change.
+    const formProviders = useFormFields(([fields]) => {
+        const providers = {};
+        if (fields && typeof fields === 'object') {
+            Object.keys(fields).forEach((key) => {
+                if (key.startsWith('providers.')) {
+                    providers[key] = fields[key];
+                }
+            });
+        }
+        return providers;
+    });
+    const { setValue, value } = useField({ path });
+    // State to hold fetched providers data
+    const [providersData, setProvidersData] = useState([]);
+    // Fetch AI Settings global to get configured providers
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                const response = await fetch('/api/globals/ai-settings?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data && data.providers) {
+                        setProvidersData(data.providers);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error fetching AI settings:', error);
+            }
+        };
+        fetchSettings().catch(console.error);
+    }, []);
+    const inferredUseCase = useMemo(() => inferUseCase(path), [path]);
+    const options = useMemo(() => {
+        if (!providerValue) {
+            return [];
+        }
+        const optionsList = [];
+        // Strategy:
+        // 1. Try to find provider in LIVE form state (if editing AISettings)
+        // 2. If not found, try to find in FETCHED API data (if editing Instructions or saved AISettings)
+        // 3. Fall back to static defaults from block definitions
+        let foundInForm = false;
+        let foundInAPI = false;
+        // --- 1. Live Form Search ---
+        // Iterate through form fields to find the matching provider block
+        // We assume standard block structure: providers.0.blockType, etc.
+        // We search up to 20 providers to be safe (unlikely to have more)
+        for (let i = 0; i < 20; i++) {
+            const typeKey = `providers.${i}.blockType`;
+            const typeField = formProviders[typeKey];
+            if (!typeField) {
+                break;
+            } // Stop if no more blocks (or gap)
+            if (typeof typeField === 'object' && 'value' in typeField && typeField.value === providerValue) {
+                foundInForm = true;
+                // Found the provider! Now iterate its models
+                // Models path: providers.0.models.0.id
+                for (let j = 0; j < 50; j++) {
+                    const idKey = `providers.${i}.models.${j}.id`;
+                    const nameKey = `providers.${i}.models.${j}.name`;
+                    const useCaseKey = `providers.${i}.models.${j}.useCase`;
+                    const enabledKey = `providers.${i}.models.${j}.enabled`;
+                    const idField = formProviders[idKey];
+                    if (!idField) {
+                        break;
+                    } // Stop if no more models
+                    const modelId = (idField).value;
+                    const modelName = (formProviders[nameKey])?.value;
+                    const modelUseCase = (formProviders[useCaseKey])?.value;
+                    const modelEnabled = (formProviders[enabledKey])?.value;
+                    // Check use case and enabled status (default to enabled if undefined)
+                    if (modelUseCase === inferredUseCase && modelEnabled !== false) {
+                        optionsList.push({
+                            label: modelName || modelId,
+                            value: modelId,
+                        });
+                    }
+                }
+                break; // Stop searching providers
+            }
+        }
+        // --- 2. API Data Search (if not found in form) ---
+        if (!foundInForm) {
+            const userProviderBlock = providersData.find((p) => p.blockType === providerValue);
+            if (userProviderBlock && userProviderBlock.models) {
+                foundInAPI = true;
+                userProviderBlock.models.forEach((m) => {
+                    if (m.useCase === inferredUseCase && m.enabled !== false) {
+                        // Avoid duplicates
+                        if (!optionsList.some((opt) => opt.value === m.id)) {
+                            optionsList.push({
+                                label: m.name,
+                                value: m.id,
+                            });
+                        }
+                    }
+                });
+            }
+        }
+        // --- 3. Static Defaults (if not found in form OR API) ---
+        // Note: We only fall back to static if we didn't find ANY configuration for this provider.
+        // If we found the provider but it had no models for this use case, we show empty list (correct).
+        if (!foundInForm && !foundInAPI) {
+            const staticBlock = allProviderBlocks.find((b) => b.slug === providerValue);
+            if (staticBlock) {
+                // Search through tabs to find models field
+                const modelsField = findFieldInBlock(staticBlock, 'models');
+                const defaultModels = modelsField && 'defaultValue' in modelsField ? modelsField.defaultValue : [];
+                defaultModels.forEach((m) => {
+                    if (m.useCase === inferredUseCase && m.enabled !== false) {
+                        optionsList.push({
+                            label: m.name,
+                            value: m.id,
+                        });
+                    }
+                });
+            }
+        }
+        return optionsList;
+    }, [providerValue, providersData, inferredUseCase, formProviders]);
+    return (<div className="field-type select">
+      <label className="field-label" htmlFor={path}>
+        Model
+      </label>
+      <SelectInput name={name} onChange={(option) => {
+            if (option && typeof option === 'object' && 'value' in option) {
+                setValue(option.value);
+            }
+            else {
+                setValue(option);
+            }
+        }} options={options} path={path} value={value}/>
+    </div>);
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    name: string;
+    path: string;
+};
+export declare const DynamicProviderSelect: React.FC<Props>;
+export {};

package/dist/ui/DynamicProviderSelect/index.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput, useField } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+export const DynamicProviderSelect = (props)=>{
+    const { name, path } = props;
+    const { setValue, value } = useField({
+        path
+    });
+    // State to hold fetched providers data
+    const [providersData, setProvidersData] = useState([]);
+    // Fetch AI Settings global to get configured providers
+    useEffect(()=>{
+        const fetchSettings = async ()=>{
+            try {
+                const response = await fetch('/api/globals/ai-settings?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data && data.providers) {
+                        setProvidersData(data.providers);
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching AI settings:', error);
+            }
+        };
+        void fetchSettings();
+    }, []);
+    const options = useMemo(()=>{
+        const optionsList = [];
+        const processedProviders = new Set();
+        // Iterate through fetched providers to find custom names
+        providersData.forEach((provider)=>{
+            if (!provider.enabled) {
+                return;
+            }
+            const blockType = provider.blockType;
+            const customName = provider.providerName;
+            // Get static label as fallback
+            const staticBlock = allProviderBlocks.find((b)=>b.slug === blockType);
+            const staticLabel = staticBlock?.labels?.singular ? typeof staticBlock.labels.singular === 'string' ? staticBlock.labels.singular : blockType : blockType;
+            const label = customName || staticLabel;
+            if (!processedProviders.has(blockType)) {
+                optionsList.push({
+                    label,
+                    value: blockType
+                });
+                processedProviders.add(blockType);
+            } else if (customName) {
+                // Update existing label if custom name is available
+                const existingOpt = optionsList.find((o)=>o.value === blockType);
+                if (existingOpt && existingOpt.label === staticLabel) {
+                    existingOpt.label = customName;
+                }
+            }
+        });
+        // Add any other available providers from blocks that might not be configured yet?
+        // Usually we only want to show configured providers in the selection list.
+        // But for standard providers (OpenAI, Google), they might not need much config other than API key.
+        // If they are not in the list, user can't select them.
+        // However, if they are not enabled in settings, maybe we shouldn't show them?
+        // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.
+        allProviderBlocks.forEach((block)=>{
+            if (!processedProviders.has(block.slug)) {
+                optionsList.push({
+                    label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,
+                    value: block.slug
+                });
+            }
+        });
+        return optionsList;
+    }, [
+        providersData
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type select",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: path,
+                children: "Provider"
+            }),
+            /*#__PURE__*/ _jsx(SelectInput, {
+                name: name,
+                onChange: (option)=>{
+                    if (option && typeof option === 'object' && 'value' in option) {
+                        setValue(option.value);
+                    } else {
+                        setValue(option);
+                    }
+                },
+                options: options,
+                path: path,
+                value: value
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/DynamicProviderSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\n\ntype Props = {\n  name: string\n  path: string\n}\n\nexport const DynamicProviderSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  const { setValue, value } = useField<string>({ path })\n\n  // State to hold fetched providers data\n  const [providersData, setProvidersData] = useState<any[]>([])\n\n  // Fetch AI Settings global to get configured providers\n  useEffect(() => {\n    const fetchSettings = async () => {\n      try {\n        const response = await fetch('/api/globals/ai-settings?depth=1')\n        if (response.ok) {\n          const data = await response.json()\n          if (data && data.providers) {\n            setProvidersData(data.providers)\n          }\n        }\n      } catch (error) {\n        console.error('Error fetching AI settings:', error)\n      }\n    }\n\n    void fetchSettings()\n  }, [])\n\n  const options = useMemo(() => {\n    const optionsList: { label: string; value: string }[] = []\n    const processedProviders = new Set<string>()\n\n    // Iterate through fetched providers to find custom names\n    providersData.forEach((provider: any) => {\n      if (!provider.enabled) {\n        return\n      }\n\n      const blockType = provider.blockType\n      const customName = provider.providerName\n\n      // Get static label as fallback\n      const staticBlock = allProviderBlocks.find((b) => b.slug === blockType)\n      const staticLabel = staticBlock?.labels?.singular\n        ? typeof staticBlock.labels.singular === 'string'\n          ? staticBlock.labels.singular\n          : blockType\n        : blockType\n\n      const label = customName || staticLabel\n\n      if (!processedProviders.has(blockType)) {\n        optionsList.push({\n          label,\n          value: blockType,\n        })\n        processedProviders.add(blockType)\n      } else if (customName) {\n        // Update existing label if custom name is available\n        const existingOpt = optionsList.find((o) => o.value === blockType)\n        if (existingOpt && existingOpt.label === staticLabel) {\n          existingOpt.label = customName\n        }\n      }\n    })\n\n    // Add any other available providers from blocks that might not be configured yet?\n    // Usually we only want to show configured providers in the selection list.\n    // But for standard providers (OpenAI, Google), they might not need much config other than API key.\n    // If they are not in the list, user can't select them.\n    // However, if they are not enabled in settings, maybe we shouldn't show them?\n    // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.\n\n    allProviderBlocks.forEach((block) => {\n      if (!processedProviders.has(block.slug)) {\n        optionsList.push({\n          label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,\n          value: block.slug,\n        })\n      }\n    })\n\n    return optionsList\n  }, [providersData])\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Provider\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={options as any}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","useField","React","useEffect","useMemo","useState","allProviderBlocks","DynamicProviderSelect","props","name","path","setValue","value","providersData","setProvidersData","fetchSettings","response","fetch","ok","data","json","providers","error","console","options","optionsList","processedProviders","Set","forEach","provider","enabled","blockType","customName","providerName","staticBlock","find","b","slug","staticLabel","labels","singular","label","has","push","add","existingOpt","o","block","div","className","htmlFor","onChange","option"],"mappings":"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"}

package/dist/ui/DynamicProviderSelect/index.jsx

@@ -0,0 +1,90 @@
+'use client';
+import { SelectInput, useField } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+export const DynamicProviderSelect = (props) => {
+    const { name, path } = props;
+    const { setValue, value } = useField({ path });
+    // State to hold fetched providers data
+    const [providersData, setProvidersData] = useState([]);
+    // Fetch AI Settings global to get configured providers
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                const response = await fetch('/api/globals/ai-settings?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data && data.providers) {
+                        setProvidersData(data.providers);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error fetching AI settings:', error);
+            }
+        };
+        void fetchSettings();
+    }, []);
+    const options = useMemo(() => {
+        const optionsList = [];
+        const processedProviders = new Set();
+        // Iterate through fetched providers to find custom names
+        providersData.forEach((provider) => {
+            if (!provider.enabled) {
+                return;
+            }
+            const blockType = provider.blockType;
+            const customName = provider.providerName;
+            // Get static label as fallback
+            const staticBlock = allProviderBlocks.find((b) => b.slug === blockType);
+            const staticLabel = staticBlock?.labels?.singular
+                ? typeof staticBlock.labels.singular === 'string'
+                    ? staticBlock.labels.singular
+                    : blockType
+                : blockType;
+            const label = customName || staticLabel;
+            if (!processedProviders.has(blockType)) {
+                optionsList.push({
+                    label,
+                    value: blockType,
+                });
+                processedProviders.add(blockType);
+            }
+            else if (customName) {
+                // Update existing label if custom name is available
+                const existingOpt = optionsList.find((o) => o.value === blockType);
+                if (existingOpt && existingOpt.label === staticLabel) {
+                    existingOpt.label = customName;
+                }
+            }
+        });
+        // Add any other available providers from blocks that might not be configured yet?
+        // Usually we only want to show configured providers in the selection list.
+        // But for standard providers (OpenAI, Google), they might not need much config other than API key.
+        // If they are not in the list, user can't select them.
+        // However, if they are not enabled in settings, maybe we shouldn't show them?
+        // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.
+        allProviderBlocks.forEach((block) => {
+            if (!processedProviders.has(block.slug)) {
+                optionsList.push({
+                    label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,
+                    value: block.slug,
+                });
+            }
+        });
+        return optionsList;
+    }, [providersData]);
+    return (<div className="field-type select">
+      <label className="field-label" htmlFor={path}>
+        Provider
+      </label>
+      <SelectInput name={name} onChange={(option) => {
+            if (option && typeof option === 'object' && 'value' in option) {
+                setValue(option.value);
+            }
+            else {
+                setValue(option);
+            }
+        }} options={options} path={path} value={value}/>
+    </div>);
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    name: string;
+    path: string;
+};
+export declare const DynamicVoiceSelect: React.FC<Props>;
+export {};

package/dist/ui/DynamicVoiceSelect/index.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+export const DynamicVoiceSelect = (props)=>{
+    const { name, path } = props;
+    // Get provider from siblings
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    // Accessing provider from sibling data in a group
+    const providerField = useFormFields(([fields])=>fields[`${parentPath}.provider`]);
+    const provider = providerField?.value;
+    const { setValue, value } = useField({
+        path
+    });
+    const [aiSettings, setAiSettings] = useState(null);
+    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));
+    }, []);
+    const voices = useMemo(()=>{
+        if (!provider || !aiSettings) {
+            return [];
+        }
+        const providerBlock = aiSettings.providers?.find((p)=>p.blockType === provider && p.enabled);
+        if (!providerBlock) {
+            return [];
+        }
+        // Get voices from provider block
+        const voicesArray = providerBlock.voices || [];
+        return voicesArray.filter((v)=>v.enabled !== false).map((v)=>({
+                label: v.name || v.id,
+                value: v.id
+            }));
+    }, [
+        provider,
+        aiSettings
+    ]);
+    if (!provider) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type text",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: path,
+                    children: "Voice"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-600)',
+                        fontSize: '13px'
+                    },
+                    children: "Please select a provider first."
+                })
+            ]
+        });
+    }
+    if (voices.length === 0) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type text",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: path,
+                    children: "Voice"
+                }),
+                /*#__PURE__*/ _jsxs("p", {
+                    style: {
+                        color: 'var(--theme-elevation-600)',
+                        fontSize: '13px'
+                    },
+                    children: [
+                        "No voices available. Please configure voices in AI Settings for ",
+                        provider,
+                        "."
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type select",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: path,
+                children: "Voice"
+            }),
+            /*#__PURE__*/ _jsx(SelectInput, {
+                name: name,
+                onChange: (option)=>{
+                    if (option && typeof option === 'object' && 'value' in option) {
+                        setValue(option.value);
+                    } else {
+                        setValue(option);
+                    }
+                },
+                options: voices,
+                path: path,
+                value: value
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/DynamicVoiceSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\ntype Props = {\n  name: string\n  path: string\n}\n\nexport const DynamicVoiceSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  // Get provider from siblings\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  // Accessing provider from sibling data in a group\n  const providerField = useFormFields(([fields]) => fields[`${parentPath}.provider`])\n  const provider = providerField?.value as string\n\n  const { setValue, value } = useField<string>({ path })\n  const [aiSettings, setAiSettings] = useState<any>(null)\n\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  const voices = useMemo(() => {\n    if (!provider || !aiSettings) {\n      return []\n    }\n\n    const providerBlock = aiSettings.providers?.find(\n      (p: any) => p.blockType === provider && p.enabled,\n    )\n    if (!providerBlock) {\n      return []\n    }\n\n    // Get voices from provider block\n    const voicesArray = providerBlock.voices || []\n\n    return voicesArray\n      .filter((v: any) => v.enabled !== false)\n      .map((v: any) => ({\n        label: v.name || v.id,\n        value: v.id,\n      }))\n  }, [provider, aiSettings])\n\n  if (!provider) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          Please select a provider first.\n        </p>\n      </div>\n    )\n  }\n\n  if (voices.length === 0) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          No voices available. Please configure voices in AI Settings for {provider}.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Voice\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value as string)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={voices}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","useField","useFormFields","React","useEffect","useMemo","useState","DynamicVoiceSelect","props","name","path","parentPath","split","slice","join","providerField","fields","provider","value","setValue","aiSettings","setAiSettings","fetch","then","res","json","data","catch","err","console","error","voices","providerBlock","providers","find","p","blockType","enabled","voicesArray","filter","v","map","label","id","div","className","htmlFor","style","color","fontSize","length","onChange","option","options"],"mappings":"AAAA;;AAEA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACrE,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAO3D,OAAO,MAAMC,qBAAsC,CAACC;IAClD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGF;IAEvB,6BAA6B;IAC7B,MAAMG,aAAaD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACrD,kDAAkD;IAClD,MAAMC,gBAAgBb,cAAc,CAAC,CAACc,OAAO,GAAKA,MAAM,CAAC,CAAC,EAAEL,WAAW,SAAS,CAAC,CAAC;IAClF,MAAMM,WAAWF,eAAeG;IAEhC,MAAM,EAAEC,QAAQ,EAAED,KAAK,EAAE,GAAGjB,SAAiB;QAAES;IAAK;IACpD,MAAM,CAACU,YAAYC,cAAc,GAAGf,SAAc;IAElDF,UAAU;QACRkB,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,MAAMG,SAAS1B,QAAQ;QACrB,IAAI,CAACY,YAAY,CAACG,YAAY;YAC5B,OAAO,EAAE;QACX;QAEA,MAAMY,gBAAgBZ,WAAWa,SAAS,EAAEC,KAC1C,CAACC,IAAWA,EAAEC,SAAS,KAAKnB,YAAYkB,EAAEE,OAAO;QAEnD,IAAI,CAACL,eAAe;YAClB,OAAO,EAAE;QACX;QAEA,iCAAiC;QACjC,MAAMM,cAAcN,cAAcD,MAAM,IAAI,EAAE;QAE9C,OAAOO,YACJC,MAAM,CAAC,CAACC,IAAWA,EAAEH,OAAO,KAAK,OACjCI,GAAG,CAAC,CAACD,IAAY,CAAA;gBAChBE,OAAOF,EAAE/B,IAAI,IAAI+B,EAAEG,EAAE;gBACrBzB,OAAOsB,EAAEG,EAAE;YACb,CAAA;IACJ,GAAG;QAAC1B;QAAUG;KAAW;IAEzB,IAAI,CAACH,UAAU;QACb,qBACE,MAAC2B;YAAIC,WAAU;;8BACb,KAACH;oBAAMG,WAAU;oBAAcC,SAASpC;8BAAM;;8BAG9C,KAACyB;oBAAEY,OAAO;wBAAEC,OAAO;wBAA8BC,UAAU;oBAAO;8BAAG;;;;IAK3E;IAEA,IAAIlB,OAAOmB,MAAM,KAAK,GAAG;QACvB,qBACE,MAACN;YAAIC,WAAU;;8BACb,KAACH;oBAAMG,WAAU;oBAAcC,SAASpC;8BAAM;;8BAG9C,MAACyB;oBAAEY,OAAO;wBAAEC,OAAO;wBAA8BC,UAAU;oBAAO;;wBAAG;wBACFhC;wBAAS;;;;;IAIlF;IAEA,qBACE,MAAC2B;QAAIC,WAAU;;0BACb,KAACH;gBAAMG,WAAU;gBAAcC,SAASpC;0BAAM;;0BAG9C,KAACV;gBACCS,MAAMA;gBACN0C,UAAU,CAACC;oBACT,IAAIA,UAAU,OAAOA,WAAW,YAAY,WAAWA,QAAQ;wBAC7DjC,SAASiC,OAAOlC,KAAK;oBACvB,OAAO;wBACLC,SAASiC;oBACX;gBACF;gBACAC,SAAStB;gBACTrB,MAAMA;gBACNQ,OAAOA;;;;AAIf,EAAC"}

package/dist/ui/DynamicVoiceSelect/index.jsx

@@ -0,0 +1,69 @@
+'use client';
+import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+export const DynamicVoiceSelect = (props) => {
+    const { name, path } = props;
+    // Get provider from siblings
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    // Accessing provider from sibling data in a group
+    const providerField = useFormFields(([fields]) => fields[`${parentPath}.provider`]);
+    const provider = providerField?.value;
+    const { setValue, value } = useField({ path });
+    const [aiSettings, setAiSettings] = useState(null);
+    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));
+    }, []);
+    const voices = useMemo(() => {
+        if (!provider || !aiSettings) {
+            return [];
+        }
+        const providerBlock = aiSettings.providers?.find((p) => p.blockType === provider && p.enabled);
+        if (!providerBlock) {
+            return [];
+        }
+        // Get voices from provider block
+        const voicesArray = providerBlock.voices || [];
+        return voicesArray
+            .filter((v) => v.enabled !== false)
+            .map((v) => ({
+            label: v.name || v.id,
+            value: v.id,
+        }));
+    }, [provider, aiSettings]);
+    if (!provider) {
+        return (<div className="field-type text">
+        <label className="field-label" htmlFor={path}>
+          Voice
+        </label>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
+          Please select a provider first.
+        </p>
+      </div>);
+    }
+    if (voices.length === 0) {
+        return (<div className="field-type text">
+        <label className="field-label" htmlFor={path}>
+          Voice
+        </label>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
+          No voices available. Please configure voices in AI Settings for {provider}.
+        </p>
+      </div>);
+    }
+    return (<div className="field-type select">
+      <label className="field-label" htmlFor={path}>
+        Voice
+      </label>
+      <SelectInput name={name} onChange={(option) => {
+            if (option && typeof option === 'object' && 'value' in option) {
+                setValue(option.value);
+            }
+            else {
+                setValue(option);
+            }
+        }} options={voices} path={path} value={value}/>
+    </div>);
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    label?: string;
+    path: string;
+    required?: boolean;
+};
+export declare const EncryptedTextField: React.FC<Props>;
+export {};