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

package/dist/ui/Compose/hooks/useHistory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/Compose/hooks/useHistory.ts"],"sourcesContent":["'use client'\n\nimport { useDocumentInfo, useField } from '@payloadcms/ui'\nimport { useCallback, useEffect } from 'react'\n\nimport { PLUGIN_NAME } from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\n\nconst STORAGE_KEY = `${PLUGIN_NAME}-fields-history`\n\ninterface HistoryState {\n  [path: string]: {\n    currentIndex: number\n    history: any[]\n  }\n}\n\nexport const useHistory = () => {\n  const { id } = useDocumentInfo()\n  const { path: pathFromContext, schemaPath } = useFieldProps()\n  const { value: currentFieldValue } = useField<string>({\n    path: pathFromContext ?? '',\n  })\n\n  const fieldKey = `${id}.${schemaPath}`\n\n  const getLatestHistory = useCallback((): HistoryState => {\n    try {\n      // This condition is applied, as it was somehow triggering on server side\n      if (typeof localStorage !== 'undefined') {\n        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')\n      }\n      return {}\n    } catch (e) {\n      console.error('Error parsing history:', e)\n      return {}\n    }\n  }, [])\n\n  const saveToLocalStorage = useCallback((newGlobalHistory: HistoryState) => {\n    if (typeof localStorage !== 'undefined') {\n      localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory))\n    }\n  }, [])\n\n  // Clear previous history\n  const clearHistory = useCallback(() => {\n    const latestHistory = { ...getLatestHistory() }\n    Object.keys(latestHistory).forEach((k) => {\n      if (!k.startsWith(id?.toString() ?? '')) {\n        delete latestHistory[k]\n      }\n    })\n    saveToLocalStorage(latestHistory)\n  }, [id, fieldKey, getLatestHistory, saveToLocalStorage])\n\n  useEffect(() => {\n    // This is applied to clear out the document history which is not currently in use\n    clearHistory()\n\n    const latestHistory = getLatestHistory()\n    const { currentIndex, history } = latestHistory[fieldKey] || {\n      currentIndex: -1,\n      history: [],\n    }\n\n    let newIndex = currentIndex\n    if (currentIndex == -1) {\n      newIndex = 0\n      if (currentFieldValue) {\n        history[newIndex] = currentFieldValue\n      }\n    }\n\n    const newGlobalHistory = {\n      ...latestHistory,\n      [fieldKey]: { currentIndex: newIndex, history },\n    }\n\n    saveToLocalStorage(newGlobalHistory)\n  }, [fieldKey])\n\n  const set = useCallback(\n    (data: any) => {\n      const latestHistory = getLatestHistory()\n      const { currentIndex, history } = latestHistory[fieldKey] || {\n        currentIndex: -1,\n        history: [],\n      }\n      const newHistory = [...history.slice(0, currentIndex + 1), data]\n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newHistory.length - 1, history: newHistory },\n      }\n      saveToLocalStorage(newGlobalHistory)\n      return data\n    },\n    [fieldKey, getLatestHistory, saveToLocalStorage],\n  )\n\n  const undo = useCallback(() => {\n    const latestHistory = getLatestHistory()\n    const { currentIndex, history } = latestHistory[fieldKey] || { currentIndex: -1, history: [] }\n    if (currentIndex > 0) {\n      const newIndex = currentIndex - 1\n      const newValue = history[newIndex]\n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newIndex, history },\n      }\n      saveToLocalStorage(newGlobalHistory)\n      return newValue\n    }\n    return undefined\n  }, [fieldKey, getLatestHistory, saveToLocalStorage])\n\n  const redo = useCallback(() => {\n    const latestHistory = getLatestHistory()\n    const { currentIndex, history } = latestHistory[fieldKey] || { currentIndex: -1, history: [] }\n    if (currentIndex < history.length - 1) {\n      const newIndex = currentIndex + 1\n      const newValue = history[newIndex]\n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newIndex, history },\n      }\n      saveToLocalStorage(newGlobalHistory)\n      return newValue\n    }\n    return undefined\n  }, [fieldKey, getLatestHistory, saveToLocalStorage])\n\n  const getLatestFieldHistory = useCallback(() => {\n    const latestHistory = getLatestHistory()\n    return latestHistory[fieldKey] || { currentIndex: -1, history: [] }\n  }, [getLatestHistory, fieldKey])\n\n  const fieldHistory = getLatestFieldHistory()\n\n  const canUndo = fieldHistory.currentIndex > 0\n  const canRedo = fieldHistory.currentIndex < fieldHistory.history.length - 1\n  const currentValue = fieldHistory.history[fieldHistory.currentIndex]\n\n  return {\n    canRedo,\n    canUndo,\n    currentValue,\n    redo,\n    set,\n    undo,\n  }\n}\n"],"names":["useDocumentInfo","useField","useCallback","useEffect","PLUGIN_NAME","useFieldProps","STORAGE_KEY","useHistory","id","path","pathFromContext","schemaPath","value","currentFieldValue","fieldKey","getLatestHistory","localStorage","JSON","parse","getItem","e","console","error","saveToLocalStorage","newGlobalHistory","setItem","stringify","clearHistory","latestHistory","Object","keys","forEach","k","startsWith","toString","currentIndex","history","newIndex","set","data","newHistory","slice","length","undo","newValue","undefined","redo","getLatestFieldHistory","fieldHistory","canUndo","canRedo","currentValue"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useHistory.ts"],"sourcesContent":["'use client'\n\nimport { useDocumentInfo, useForm } from '@payloadcms/ui'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { getSiblingData } from 'payload/shared'\n\nimport { PLUGIN_NAME } from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\n\nconst STORAGE_KEY = `${PLUGIN_NAME}-fields-history`\nconst MAX_HISTORY_SIZE = 50\n\ninterface HistoryState {\n  [path: string]: {\n    currentIndex: number\n    history: any[]\n  }\n}\n\n// Global cache to prevent synchronous localStorage reads on every render\nlet globalHistoryCache: HistoryState | null = null\n\nexport const useHistory = () => {\n  const { id } = useDocumentInfo()\n  const { path, schemaPath } = useFieldProps()\n  const { getData } = useForm()\n\n  const fieldKey = `${id}.${schemaPath}`\n\n  const getLatestHistory = useCallback((): HistoryState => {\n    // Return cache if available\n    if (globalHistoryCache) {\n      return globalHistoryCache\n    }\n\n    try {\n      if (typeof localStorage !== 'undefined') {\n        // Read once, cache it\n        const stored = localStorage.getItem(STORAGE_KEY)\n        globalHistoryCache = stored ? JSON.parse(stored) : {}\n        return globalHistoryCache!\n      }\n      return {}\n    } catch (e) {\n      console.error('Error parsing history:', e)\n      return {}\n    }\n  }, [])\n\n  // Debounce timer ref to prevent excessive localStorage writes\n  const saveTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const saveToLocalStorage = useCallback((newGlobalHistory: HistoryState) => {\n    // Update cache immediately\n    globalHistoryCache = newGlobalHistory\n\n    if (typeof localStorage === 'undefined') {\n      return\n    }\n\n    // Clear any pending save\n    if (saveTimerRef.current) {\n      clearTimeout(saveTimerRef.current)\n    }\n\n    // Debounce the save operation by 500ms\n    saveTimerRef.current = setTimeout(() => {\n      // Use requestIdleCallback if available to avoid blocking the main thread\n      if (typeof requestIdleCallback !== 'undefined') {\n        requestIdleCallback(\n          () => {\n            try {\n              localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory))\n            } catch (e) {\n              console.warn('Failed to save history to localStorage', e)\n            }\n          },\n          { timeout: 2000 },\n        )\n      } else {\n        // Fallback for browsers without requestIdleCallback\n        try {\n          localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory))\n        } catch (e) {\n          console.warn('Failed to save history to localStorage', e)\n        }\n      }\n      saveTimerRef.current = null\n    }, 500)\n  }, [])\n\n  // Sync with other tabs\n  useEffect(() => {\n    const handleStorageChange = (e: StorageEvent) => {\n      if (e.key === STORAGE_KEY && e.newValue) {\n        try {\n          globalHistoryCache = JSON.parse(e.newValue)\n        } catch (err) {\n          // ignore parse error\n        }\n      }\n    }\n\n    window.addEventListener('storage', handleStorageChange)\n    return () => {\n      window.removeEventListener('storage', handleStorageChange)\n    }\n  }, [])\n\n  // Clear previous history\n  const clearHistory = useCallback(() => {\n    const latestHistory = { ...getLatestHistory() }\n    let hasChanges = false\n    Object.keys(latestHistory).forEach((k) => {\n      if (!k.startsWith(id?.toString() ?? '')) {\n        delete latestHistory[k]\n        hasChanges = true\n      }\n    })\n    \n    if (hasChanges) {\n      saveToLocalStorage(latestHistory)\n    }\n  }, [id, getLatestHistory, saveToLocalStorage])\n\n  useEffect(() => {\n    // This is applied to clear out the document history which is not currently in use\n    clearHistory()\n\n    const latestHistory = getLatestHistory()\n    const { currentIndex, history } = latestHistory[fieldKey] || {\n      currentIndex: -1,\n      history: [],\n    }\n\n    let newIndex = currentIndex\n    let historyUpdated = false\n    const newHistoryArray = [...history]\n\n    if (currentIndex == -1) {\n      newIndex = 0\n      \n      // Get initial value from form data instead of subscribing to useField\n      // This implementation avoids re-rendering on every keystroke\n      try {\n        const data = getData()\n        // We need to resolve the value from the data object using the path\n        // path might be 'group.subgroup.field'\n        if (path) {\n          const value = getSiblingData(data, path)\n          if (value) {\n            newHistoryArray[newIndex] = value\n            historyUpdated = true\n          }\n        }\n      } catch (e) {\n        // If we can't get the data, just ignore\n      }\n    }\n\n    if (historyUpdated) {\n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newIndex, history: newHistoryArray },\n      }\n      saveToLocalStorage(newGlobalHistory)\n    }\n  }, [fieldKey, getData, path, clearHistory, getLatestHistory, saveToLocalStorage])\n\n  const set = useCallback(\n    (data: any) => {\n      const latestHistory = getLatestHistory()\n      const { currentIndex, history } = latestHistory[fieldKey] || {\n        currentIndex: -1,\n        history: [],\n      }\n      \n      // Create new history array slice, appending new data\n      let newHistory = [...history.slice(0, currentIndex + 1), data]\n      \n      // Enforce Max History Size\n      if (newHistory.length > MAX_HISTORY_SIZE) {\n        newHistory = newHistory.slice(newHistory.length - MAX_HISTORY_SIZE)\n      }\n      \n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newHistory.length - 1, history: newHistory },\n      }\n      saveToLocalStorage(newGlobalHistory)\n      return data\n    },\n    [fieldKey, getLatestHistory, saveToLocalStorage],\n  )\n\n  const undo = useCallback(() => {\n    const latestHistory = getLatestHistory()\n    const { currentIndex, history } = latestHistory[fieldKey] || { currentIndex: -1, history: [] }\n    if (currentIndex > 0) {\n      const newIndex = currentIndex - 1\n      const newValue = history[newIndex]\n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newIndex, history },\n      }\n      saveToLocalStorage(newGlobalHistory)\n      return newValue\n    }\n    return undefined\n  }, [fieldKey, getLatestHistory, saveToLocalStorage])\n\n  const redo = useCallback(() => {\n    const latestHistory = getLatestHistory()\n    const { currentIndex, history } = latestHistory[fieldKey] || { currentIndex: -1, history: [] }\n    if (currentIndex < history.length - 1) {\n      const newIndex = currentIndex + 1\n      const newValue = history[newIndex]\n      const newGlobalHistory = {\n        ...latestHistory,\n        [fieldKey]: { currentIndex: newIndex, history },\n      }\n      saveToLocalStorage(newGlobalHistory)\n      return newValue\n    }\n    return undefined\n  }, [fieldKey, getLatestHistory, saveToLocalStorage])\n\n  const getLatestFieldHistory = useCallback(() => {\n    const latestHistory = getLatestHistory()\n    return latestHistory[fieldKey] || { currentIndex: -1, history: [] }\n  }, [getLatestHistory, fieldKey])\n\n  const fieldHistory = getLatestFieldHistory()\n\n  const canUndo = fieldHistory.currentIndex > 0\n  const canRedo = fieldHistory.currentIndex < fieldHistory.history.length - 1\n  \n  // Note: We deliberately do not return currentValue to avoid subscription re-renders\n  // The consumers of this hook (UndoRedoActions) didn't use it anyway.\n\n  return {\n    canRedo,\n    canUndo,\n    redo,\n    set,\n    undo,\n  }\n}\n"],"names":["useDocumentInfo","useForm","useCallback","useEffect","useRef","getSiblingData","PLUGIN_NAME","useFieldProps","STORAGE_KEY","MAX_HISTORY_SIZE","globalHistoryCache","useHistory","id","path","schemaPath","getData","fieldKey","getLatestHistory","localStorage","stored","getItem","JSON","parse","e","console","error","saveTimerRef","saveToLocalStorage","newGlobalHistory","current","clearTimeout","setTimeout","requestIdleCallback","setItem","stringify","warn","timeout","handleStorageChange","key","newValue","err","window","addEventListener","removeEventListener","clearHistory","latestHistory","hasChanges","Object","keys","forEach","k","startsWith","toString","currentIndex","history","newIndex","historyUpdated","newHistoryArray","data","value","set","newHistory","slice","length","undo","undefined","redo","getLatestFieldHistory","fieldHistory","canUndo","canRedo"],"mappings":"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"}

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

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

package/dist/ui/DynamicModelSelect/index.js

@@ -0,0 +1,231 @@
+'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';
+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 /*#__PURE__*/ _jsxs("div", {
+        className: "field-type select",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: path,
+                children: "Model"
+            }),
+            /*#__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/DynamicModelSelect/index.js.map

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

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