@ai-stack/payloadcms 3.76.0-beta.0 → 3.76.0-beta.2

package/dist/ui/ConfigDashboard/index.js

@@ -0,0 +1,159 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, toast, useConfig, useTranslation } from '@payloadcms/ui';
+// @ts-expect-error - Next.js types are not resolving correctly with nodenext but runtime is fine
+import { useRouter } from 'next/navigation';
+import React, { use, useEffect, useState } from 'react';
+import { excludeCollections } from '../../defaults.js';
+import { InstructionsContext } from '../../providers/InstructionsProvider/context.js';
+import styles from './configDashboard.module.css';
+export const ConfigDashboard = ()=>{
+    const { config: { collections, routes: { admin: adminRoute, api: apiRoute } } } = useConfig();
+    const router = useRouter();
+    const { refresh, setEnabledCollections: setEnabledCollectionsInContext } = use(InstructionsContext);
+    const [enabledCollections, setEnabledCollections] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const { t } = useTranslation();
+    const availableCollections = collections.filter((c)=>!excludeCollections.includes(c.slug) && !c.admin?.hidden);
+    useEffect(()=>{
+        const fetchSettings = async ()=>{
+            try {
+                const response = await fetch(`${apiRoute}/globals/ai-providers`);
+                if (response.ok) {
+                    const data = await response.json();
+                    const storedEnabled = data.enabledCollections || [];
+                    setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : []);
+                }
+            } catch (error) {
+                console.error('Failed to fetch AI settings:', error);
+            } finally{
+                setIsLoading(false);
+            }
+        };
+        fetchSettings().catch(console.error);
+    }, [
+        apiRoute
+    ]);
+    const handleToggle = (slug)=>{
+        setEnabledCollections((prev)=>{
+            if (prev.includes(slug)) {
+                return prev.filter((s)=>s !== slug);
+            }
+            return [
+                ...prev,
+                slug
+            ];
+        });
+    };
+    const handleSave = async ()=>{
+        setIsSaving(true);
+        try {
+            const response = await fetch(`${apiRoute}/globals/ai-providers`, {
+                body: JSON.stringify({
+                    enabledCollections
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST'
+            });
+            if (response.ok) {
+                toast.success(t('ai-plugin:configDashboard:settingsSaved'));
+                if (setEnabledCollectionsInContext) {
+                    setEnabledCollectionsInContext(enabledCollections);
+                }
+                if (refresh) {
+                    await refresh();
+                }
+                router.refresh();
+            } else {
+                toast.error(t('ai-plugin:configDashboard:failedToSave'));
+            }
+        } catch (error) {
+            console.error('Error saving settings:', error);
+            toast.error(t('ai-plugin:configDashboard:errorSaving'));
+        } finally{
+            setIsSaving(false);
+        }
+    };
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: styles.loading,
+            children: t('ai-plugin:configDashboard:loadingConfiguration')
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.wrapper,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.header,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                className: styles.title,
+                                children: t('ai-plugin:configDashboard:configureTitle')
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: styles.subtitle,
+                                children: t('ai-plugin:configDashboard:configureSubtitle')
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.headerActions,
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "secondary",
+                                el: "link",
+                                to: `${adminRoute}/globals/ai-providers`,
+                                children: t('ai-plugin:configDashboard:providers')
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                disabled: isSaving,
+                                onClick: handleSave,
+                                children: isSaving ? t('ai-plugin:configDashboard:saving') : t('ai-plugin:configDashboard:saveChanges')
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.body,
+                children: [
+                    /*#__PURE__*/ _jsx("h5", {
+                        className: styles.bodyTitle,
+                        children: t('ai-plugin:configDashboard:selectCollectionsBody')
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.grid,
+                        children: availableCollections.map((collection)=>{
+                            const isEnabled = enabledCollections.includes(collection.slug);
+                            return /*#__PURE__*/ _jsxs("button", {
+                                className: styles.toggleButton,
+                                "data-enabled": isEnabled,
+                                onClick: ()=>handleToggle(collection.slug),
+                                type: "button",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: styles.toggleTrack,
+                                        children: /*#__PURE__*/ _jsx("div", {
+                                            className: styles.toggleKnob
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.toggleLabel,
+                                        children: typeof collection.labels?.singular === 'string' ? collection.labels.singular : collection.labels?.singular?.en || collection.slug
+                                    })
+                                ]
+                            }, collection.slug);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/ConfigDashboard/index.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useConfig, useTranslation } from '@payloadcms/ui'\n// @ts-expect-error - Next.js types are not resolving correctly with nodenext but runtime is fine\nimport { useRouter } from 'next/navigation'\nimport React, { use, useEffect, useState } from 'react'\n\nimport { excludeCollections } from '../../defaults.js'\nimport { InstructionsContext } from '../../providers/InstructionsProvider/context.js'\nimport styles from './configDashboard.module.css'\n\nexport const ConfigDashboard: React.FC = () => {\n  const {\n    config: {\n      collections,\n      routes: { admin: adminRoute, api: apiRoute },\n    },\n  } = useConfig()\n  const router = useRouter()\n  const { refresh, setEnabledCollections: setEnabledCollectionsInContext } =\n    use(InstructionsContext)\n\n  const [enabledCollections, setEnabledCollections] = useState<string[]>([])\n  const [isLoading, setIsLoading] = useState(true)\n  const [isSaving, setIsSaving] = useState(false)\n  const { t } = useTranslation()\n\n  const availableCollections = collections.filter(\n    (c) =>\n      !excludeCollections.includes(c.slug) &&\n      !(c.admin as unknown as { hidden?: ((args: any) => boolean) | boolean })?.hidden,\n  )\n\n  useEffect(() => {\n    const fetchSettings = async () => {\n      try {\n        const response = await fetch(`${apiRoute}/globals/ai-providers`)\n        if (response.ok) {\n          const data = await response.json()\n          const storedEnabled = data.enabledCollections || []\n          setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : [])\n        }\n      } catch (error) {\n        console.error('Failed to fetch AI settings:', error)\n      } finally {\n        setIsLoading(false)\n      }\n    }\n\n    fetchSettings().catch(console.error)\n  }, [apiRoute])\n\n  const handleToggle = (slug: string) => {\n    setEnabledCollections((prev) => {\n      if (prev.includes(slug)) {\n        return prev.filter((s) => s !== slug)\n      }\n      return [...prev, slug]\n    })\n  }\n\n  const handleSave = async () => {\n    setIsSaving(true)\n    try {\n      const response = await fetch(`${apiRoute}/globals/ai-providers`, {\n        body: JSON.stringify({\n          enabledCollections,\n        }),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      if (response.ok) {\n        toast.success(t('ai-plugin:configDashboard:settingsSaved' as any))\n        if (setEnabledCollectionsInContext) {\n          setEnabledCollectionsInContext(enabledCollections)\n        }\n        if (refresh) {\n          await refresh()\n        }\n        router.refresh()\n      } else {\n        toast.error(t('ai-plugin:configDashboard:failedToSave' as any))\n      }\n    } catch (error) {\n      console.error('Error saving settings:', error)\n      toast.error(t('ai-plugin:configDashboard:errorSaving' as any))\n    } finally {\n      setIsSaving(false)\n    }\n  }\n\n  if (isLoading) {\n    return <div className={styles.loading}>{t('ai-plugin:configDashboard:loadingConfiguration' as any)}</div>\n  }\n\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.header}>\n        <div>\n          <h2 className={styles.title}>{t('ai-plugin:configDashboard:configureTitle' as any)}</h2>\n          <p className={styles.subtitle}>\n            {t('ai-plugin:configDashboard:configureSubtitle' as any)}\n          </p>\n        </div>\n        <div className={styles.headerActions}>\n          <Button buttonStyle=\"secondary\" el=\"link\" to={`${adminRoute}/globals/ai-providers`}>\n            {t('ai-plugin:configDashboard:providers' as any)}\n          </Button>\n          <Button disabled={isSaving} onClick={handleSave}>\n            {isSaving ? t('ai-plugin:configDashboard:saving' as any) : t('ai-plugin:configDashboard:saveChanges' as any)}\n          </Button>\n        </div>\n      </div>\n\n      <div className={styles.body}>\n        <h5 className={styles.bodyTitle}>\n          {t('ai-plugin:configDashboard:selectCollectionsBody' as any)}\n        </h5>\n        <div className={styles.grid}>\n          {availableCollections.map((collection) => {\n            const isEnabled = enabledCollections.includes(collection.slug)\n            return (\n              <button\n                className={styles.toggleButton}\n                data-enabled={isEnabled}\n                key={collection.slug}\n                onClick={() => handleToggle(collection.slug)}\n                type=\"button\"\n              >\n                <div className={styles.toggleTrack}>\n                  <div className={styles.toggleKnob} />\n                </div>\n                <span className={styles.toggleLabel}>\n                  {typeof collection.labels?.singular === 'string'\n                    ? collection.labels.singular\n                    : collection.labels?.singular?.en || collection.slug}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Button","toast","useConfig","useTranslation","useRouter","React","use","useEffect","useState","excludeCollections","InstructionsContext","styles","ConfigDashboard","config","collections","routes","admin","adminRoute","api","apiRoute","router","refresh","setEnabledCollections","setEnabledCollectionsInContext","enabledCollections","isLoading","setIsLoading","isSaving","setIsSaving","t","availableCollections","filter","c","includes","slug","hidden","fetchSettings","response","fetch","ok","data","json","storedEnabled","Array","isArray","error","console","catch","handleToggle","prev","s","handleSave","body","JSON","stringify","headers","method","success","div","className","loading","wrapper","header","h2","title","p","subtitle","headerActions","buttonStyle","el","to","disabled","onClick","h5","bodyTitle","grid","map","collection","isEnabled","button","toggleButton","data-enabled","type","toggleTrack","toggleKnob","span","toggleLabel","labels","singular","en"],"mappings":"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"}

package/dist/ui/ConfigDashboard/index.jsx

@@ -0,0 +1,122 @@
+'use client';
+import { Button, toast, useConfig, useTranslation } from '@payloadcms/ui';
+// @ts-expect-error - Next.js types are not resolving correctly with nodenext but runtime is fine
+import { useRouter } from 'next/navigation';
+import React, { use, useEffect, useState } from 'react';
+import { excludeCollections } from '../../defaults.js';
+import { InstructionsContext } from '../../providers/InstructionsProvider/context.js';
+import styles from './configDashboard.module.css';
+export const ConfigDashboard = () => {
+    const { config: { collections, routes: { admin: adminRoute, api: apiRoute }, }, } = useConfig();
+    const router = useRouter();
+    const { refresh, setEnabledCollections: setEnabledCollectionsInContext } = use(InstructionsContext);
+    const [enabledCollections, setEnabledCollections] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const { t } = useTranslation();
+    const availableCollections = collections.filter((c) => !excludeCollections.includes(c.slug) &&
+        !c.admin?.hidden);
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                const response = await fetch(`${apiRoute}/globals/ai-providers`);
+                if (response.ok) {
+                    const data = await response.json();
+                    const storedEnabled = data.enabledCollections || [];
+                    setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : []);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch AI settings:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings().catch(console.error);
+    }, [apiRoute]);
+    const handleToggle = (slug) => {
+        setEnabledCollections((prev) => {
+            if (prev.includes(slug)) {
+                return prev.filter((s) => s !== slug);
+            }
+            return [...prev, slug];
+        });
+    };
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            const response = await fetch(`${apiRoute}/globals/ai-providers`, {
+                body: JSON.stringify({
+                    enabledCollections,
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'POST',
+            });
+            if (response.ok) {
+                toast.success(t('ai-plugin:configDashboard:settingsSaved'));
+                if (setEnabledCollectionsInContext) {
+                    setEnabledCollectionsInContext(enabledCollections);
+                }
+                if (refresh) {
+                    await refresh();
+                }
+                router.refresh();
+            }
+            else {
+                toast.error(t('ai-plugin:configDashboard:failedToSave'));
+            }
+        }
+        catch (error) {
+            console.error('Error saving settings:', error);
+            toast.error(t('ai-plugin:configDashboard:errorSaving'));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    if (isLoading) {
+        return <div className={styles.loading}>{t('ai-plugin:configDashboard:loadingConfiguration')}</div>;
+    }
+    return (<div className={styles.wrapper}>
+      <div className={styles.header}>
+        <div>
+          <h2 className={styles.title}>{t('ai-plugin:configDashboard:configureTitle')}</h2>
+          <p className={styles.subtitle}>
+            {t('ai-plugin:configDashboard:configureSubtitle')}
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <Button buttonStyle="secondary" el="link" to={`${adminRoute}/globals/ai-providers`}>
+            {t('ai-plugin:configDashboard:providers')}
+          </Button>
+          <Button disabled={isSaving} onClick={handleSave}>
+            {isSaving ? t('ai-plugin:configDashboard:saving') : t('ai-plugin:configDashboard:saveChanges')}
+          </Button>
+        </div>
+      </div>
+
+      <div className={styles.body}>
+        <h5 className={styles.bodyTitle}>
+          {t('ai-plugin:configDashboard:selectCollectionsBody')}
+        </h5>
+        <div className={styles.grid}>
+          {availableCollections.map((collection) => {
+            const isEnabled = enabledCollections.includes(collection.slug);
+            return (<button className={styles.toggleButton} data-enabled={isEnabled} key={collection.slug} onClick={() => handleToggle(collection.slug)} type="button">
+                <div className={styles.toggleTrack}>
+                  <div className={styles.toggleKnob}/>
+                </div>
+                <span className={styles.toggleLabel}>
+                  {typeof collection.labels?.singular === 'string'
+                    ? collection.labels.singular
+                    : collection.labels?.singular?.en || collection.slug}
+                </span>
+              </button>);
+        })}
+        </div>
+      </div>
+    </div>);
+};

package/dist/ui/DynamicModelSelect/index.js

@@ -1,8 +1,10 @@
 '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 React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+import { useAISettings } from '../hooks/useAISettings.js';
 /**
  * Find a field by name within a block's fields, searching through tabs
  */ function findFieldInBlock(block, fieldName) {
@@ -88,25 +90,8 @@ export const DynamicModelSelect = (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);
-            }
-        };
-        fetchSettings().catch(console.error);
-    }, []);
+    const { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const inferredUseCase = useMemo(()=>inferUseCase(path), [
         path
     ]);
@@ -213,13 +198,7 @@ export const DynamicModelSelect = (props)=>{
             }),
             /*#__PURE__*/ _jsx(SelectInput, {
                 name: name,
-                onChange: (option)=>{
-                    if (option && typeof option === 'object' && 'value' in option) {
-                        setValue(option.value);
-                    } else {
-                        setValue(option);
-                    }
-                },
+                onChange: (option)=>handleSelectChange(setValue, option),
                 options: options,
                 path: path,
                 value: value

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

@@ -1 +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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"}
+{"version":3,"sources":["../../../src/ui/DynamicModelSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\nimport { handleSelectChange } from '../shared/handleSelectChange.js'\nimport { useAISettings } from '../hooks/useAISettings.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  const { data: aiSettings } = useAISettings()\n  const providersData = aiSettings?.providers ?? []\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) => handleSelectChange(setValue, option)}\n        options={options as any}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n\n"],"names":["SelectInput","useField","useFormFields","React","useMemo","allProviderBlocks","handleSelectChange","useAISettings","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","data","aiSettings","providersData","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

@@ -1,7 +1,9 @@
 'use client';
 import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+import { useAISettings } from '../hooks/useAISettings.js';
 /**
  * Find a field by name within a block's fields, searching through tabs
  */
@@ -82,26 +84,8 @@ export const DynamicModelSelect = (props) => {
         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 { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const inferredUseCase = useMemo(() => inferUseCase(path), [path]);
     const options = useMemo(() => {
         if (!providerValue) {
@@ -195,13 +179,6 @@ export const DynamicModelSelect = (props) => {
       <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}/>
+      <SelectInput name={name} onChange={(option) => handleSelectChange(setValue, option)} options={options} path={path} value={value}/>
     </div>);
 };

package/dist/ui/DynamicProviderSelect/index.js

@@ -1,32 +1,17 @@
 '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 React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+import { useAISettings } from '../hooks/useAISettings.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 { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const options = useMemo(()=>{
         const optionsList = [];
         const processedProviders = new Set();
@@ -83,13 +68,7 @@ export const DynamicProviderSelect = (props)=>{
             }),
             /*#__PURE__*/ _jsx(SelectInput, {
                 name: name,
-                onChange: (option)=>{
-                    if (option && typeof option === 'object' && 'value' in option) {
-                        setValue(option.value);
-                    } else {
-                        setValue(option);
-                    }
-                },
+                onChange: (option)=>handleSelectChange(setValue, option),
                 options: options,
                 path: path,
                 value: value

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

@@ -1 +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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"}
+{"version":3,"sources":["../../../src/ui/DynamicProviderSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\nimport { handleSelectChange } from '../shared/handleSelectChange.js'\nimport { useAISettings } from '../hooks/useAISettings.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  const { data: aiSettings } = useAISettings()\n  const providersData = aiSettings?.providers ?? []\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) => handleSelectChange(setValue, option)}\n        options={options as any}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","useField","React","useMemo","allProviderBlocks","handleSelectChange","useAISettings","DynamicProviderSelect","props","name","path","setValue","value","data","aiSettings","providersData","providers","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":"AAAA;;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,iBAAgB;AACtD,OAAOC,SAASC,OAAO,QAAQ,QAAO;AAEtC,SAASC,iBAAiB,QAAQ,qCAAoC;AACtE,SAASC,kBAAkB,QAAQ,kCAAiC;AACpE,SAASC,aAAa,QAAQ,4BAA2B;AAOzD,OAAO,MAAMC,wBAAyC,CAACC;IACrD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGF;IAEvB,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGX,SAAiB;QAAES;IAAK;IAEpD,MAAM,EAAEG,MAAMC,UAAU,EAAE,GAAGR;IAC7B,MAAMS,gBAAgBD,YAAYE,aAAa,EAAE;IAEjD,MAAMC,UAAUd,QAAQ;QACtB,MAAMe,cAAkD,EAAE;QAC1D,MAAMC,qBAAqB,IAAIC;QAE/B,yDAAyD;QACzDL,cAAcM,OAAO,CAAC,CAACC;YACrB,IAAI,CAACA,SAASC,OAAO,EAAE;gBACrB;YACF;YAEA,MAAMC,YAAYF,SAASE,SAAS;YACpC,MAAMC,aAAaH,SAASI,YAAY;YAExC,+BAA+B;YAC/B,MAAMC,cAAcvB,kBAAkBwB,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAKN;YAC7D,MAAMO,cAAcJ,aAAaK,QAAQC,WACrC,OAAON,YAAYK,MAAM,CAACC,QAAQ,KAAK,WACrCN,YAAYK,MAAM,CAACC,QAAQ,GAC3BT,YACFA;YAEJ,MAAMU,QAAQT,cAAcM;YAE5B,IAAI,CAACZ,mBAAmBgB,GAAG,CAACX,YAAY;gBACtCN,YAAYkB,IAAI,CAAC;oBACfF;oBACAtB,OAAOY;gBACT;gBACAL,mBAAmBkB,GAAG,CAACb;YACzB,OAAO,IAAIC,YAAY;gBACrB,oDAAoD;gBACpD,MAAMa,cAAcpB,YAAYU,IAAI,CAAC,CAACW,IAAMA,EAAE3B,KAAK,KAAKY;gBACxD,IAAIc,eAAeA,YAAYJ,KAAK,KAAKH,aAAa;oBACpDO,YAAYJ,KAAK,GAAGT;gBACtB;YACF;QACF;QAEA,kFAAkF;QAClF,2EAA2E;QAC3E,mGAAmG;QACnG,uDAAuD;QACvD,8EAA8E;QAC9E,mGAAmG;QAEnGrB,kBAAkBiB,OAAO,CAAC,CAACmB;YACzB,IAAI,CAACrB,mBAAmBgB,GAAG,CAACK,MAAMV,IAAI,GAAG;gBACvCZ,YAAYkB,IAAI,CAAC;oBACfF,OAAO,OAAOM,MAAMR,MAAM,EAAEC,aAAa,WAAWO,MAAMR,MAAM,CAACC,QAAQ,GAAGO,MAAMV,IAAI;oBACtFlB,OAAO4B,MAAMV,IAAI;gBACnB;YACF;QACF;QAEA,OAAOZ;IACT,GAAG;QAACH;KAAc;IAElB,qBACE,MAAC0B;QAAIC,WAAU;;0BACb,KAACR;gBAAMQ,WAAU;gBAAcC,SAASjC;0BAAM;;0BAG9C,KAACV;gBACCS,MAAMA;gBACNmC,UAAU,CAACC,SAAWxC,mBAAmBM,UAAUkC;gBACnD5B,SAASA;gBACTP,MAAMA;gBACNE,OAAOA;;;;AAIf,EAAC"}

package/dist/ui/DynamicProviderSelect/index.jsx

@@ -1,30 +1,14 @@
 'use client';
 import { SelectInput, useField } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+import { useAISettings } from '../hooks/useAISettings.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 { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const options = useMemo(() => {
         const optionsList = [];
         const processedProviders = new Set();
@@ -78,13 +62,6 @@ export const DynamicProviderSelect = (props) => {
       <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}/>
+      <SelectInput name={name} onChange={(option) => handleSelectChange(setValue, option)} options={options} path={path} value={value}/>
     </div>);
 };