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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/ConfigDashboard/index.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useConfig } 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'\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\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          // Handle both simple array and object wrapper if Payload wraps it\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((e) => {\n      console.log(e)\n    })\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      // First fetch current settings to get ID or just rely on global update behavior\n      // We need to adhere to Payload's global update API\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('Settings saved successfully')\n        if (setEnabledCollectionsInContext) {\n          setEnabledCollectionsInContext(enabledCollections)\n        }\n        if (refresh) {\n          await refresh()\n        }\n        router.refresh()\n      } else {\n        toast.error('Failed to save settings')\n      }\n    } catch (error) {\n      console.error('Error saving settings:', error)\n      toast.error('Error saving settings')\n    } finally {\n      setIsSaving(false)\n    }\n  }\n\n  if (isLoading) {\n    return <div style={{ padding: '20px', textAlign: 'center' }}>Loading configuration...</div>\n  }\n\n  return (\n    <div\n      style={{\n        background: 'var(--theme-elevation-50)',\n        // border: '1px solid var(--theme-elevation-150)',\n        // borderRadius: '8px',\n        // borderBottom: '1px solid var(--theme-elevation-150)',\n        // borderTop: '1px solid var(--theme-elevation-150)',\n        marginBottom: '20px',\n        overflow: 'hidden',\n      }}\n    >\n      <div\n        style={{\n          alignItems: 'center',\n          borderBottom: '1px solid var(--theme-elevation-150)',\n          display: 'flex',\n          justifyContent: 'space-between',\n          padding: '8px var(--gutter-h)',\n        }}\n      >\n        <div>\n          <h2 style={{ margin: '0 0 5px 0' }}>Let's configure your AI Plugin</h2>\n          <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>\n            Set up the provider → Choose the content → Refine the behavior.\n          </p>\n        </div>\n        <div style={{ display: 'flex', gap: '10px' }}>\n          <Button buttonStyle=\"secondary\" el=\"link\" to={`${adminRoute}/globals/ai-providers`}>\n            Providers\n          </Button>\n          <Button disabled={isSaving} onClick={handleSave}>\n            {isSaving ? 'Saving...' : 'Save Changes'}\n          </Button>\n        </div>\n      </div>\n\n      <div style={{ padding: '24px var(--gutter-h)' }}>\n        <h5 style={{ marginBottom: '15px' }}>\n          Select the collections where AI features should be available, toggle them on or off, and\n          save your changes.\n        </h5>\n        <div\n          style={{\n            display: 'grid',\n            gap: '15px',\n            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',\n          }}\n        >\n          {availableCollections.map((collection) => {\n            const isEnabled = enabledCollections.includes(collection.slug)\n            return (\n              <button\n                key={collection.slug}\n                onClick={() => handleToggle(collection.slug)}\n                style={{\n                  alignItems: 'center',\n                  background: isEnabled\n                    ? 'var(--theme-elevation-100)'\n                    : 'var(--theme-elevation-50)',\n                  border: `1px solid ${isEnabled ? 'var(--theme-text-success)' : 'var(--theme-elevation-200)'}`,\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                  display: 'flex',\n                  gap: '10px',\n                  padding: '10px 15px',\n                  textAlign: 'left',\n                  transition: 'all 0.2s ease',\n                  width: '100%',\n                }}\n                type=\"button\"\n              >\n                <div\n                  style={{\n                    alignItems: 'center',\n                    background: isEnabled\n                      ? 'var(--theme-text-success)'\n                      : 'var(--theme-elevation-200)',\n                    borderRadius: '12px',\n                    display: 'flex',\n                    height: '24px',\n                    justifyContent: isEnabled ? 'flex-end' : 'flex-start',\n                    padding: '2px',\n                    transition: 'all 0.2s ease',\n                    width: '44px',\n                  }}\n                >\n                  <div\n                    style={{\n                      background: 'white',\n                      borderRadius: '50%',\n                      height: '20px',\n                      width: '20px',\n                    }}\n                  />\n                </div>\n                <span style={{ fontWeight: 500 }}>\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","useRouter","React","use","useEffect","useState","excludeCollections","InstructionsContext","ConfigDashboard","config","collections","routes","admin","adminRoute","api","apiRoute","router","refresh","setEnabledCollections","setEnabledCollectionsInContext","enabledCollections","isLoading","setIsLoading","isSaving","setIsSaving","availableCollections","filter","c","includes","slug","hidden","fetchSettings","response","fetch","ok","data","json","storedEnabled","Array","isArray","error","console","catch","e","log","handleToggle","prev","s","handleSave","body","JSON","stringify","headers","method","success","div","style","padding","textAlign","background","marginBottom","overflow","alignItems","borderBottom","display","justifyContent","h2","margin","p","color","fontSize","gap","buttonStyle","el","to","disabled","onClick","h5","gridTemplateColumns","map","collection","isEnabled","button","border","borderRadius","cursor","transition","width","type","height","span","fontWeight","labels","singular","en"],"mappings":"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"}
+{"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

@@ -1,10 +1,11 @@
 'use client';
-import { Button, toast, useConfig } from '@payloadcms/ui';
+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();
@@ -12,6 +13,7 @@ export const ConfigDashboard = () => {
     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(() => {
@@ -20,7 +22,6 @@ export const ConfigDashboard = () => {
                 const response = await fetch(`${apiRoute}/globals/ai-providers`);
                 if (response.ok) {
                     const data = await response.json();
-                    // Handle both simple array and object wrapper if Payload wraps it
                     const storedEnabled = data.enabledCollections || [];
                     setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : []);
                 }
@@ -32,9 +33,7 @@ export const ConfigDashboard = () => {
                 setIsLoading(false);
             }
         };
-        fetchSettings().catch((e) => {
-            console.log(e);
-        });
+        fetchSettings().catch(console.error);
     }, [apiRoute]);
     const handleToggle = (slug) => {
         setEnabledCollections((prev) => {
@@ -47,8 +46,6 @@ export const ConfigDashboard = () => {
     const handleSave = async () => {
         setIsSaving(true);
         try {
-            // First fetch current settings to get ID or just rely on global update behavior
-            // We need to adhere to Payload's global update API
             const response = await fetch(`${apiRoute}/globals/ai-providers`, {
                 body: JSON.stringify({
                     enabledCollections,
@@ -59,7 +56,7 @@ export const ConfigDashboard = () => {
                 method: 'POST',
             });
             if (response.ok) {
-                toast.success('Settings saved successfully');
+                toast.success(t('ai-plugin:configDashboard:settingsSaved'));
                 if (setEnabledCollectionsInContext) {
                     setEnabledCollectionsInContext(enabledCollections);
                 }
@@ -69,100 +66,50 @@ export const ConfigDashboard = () => {
                 router.refresh();
             }
             else {
-                toast.error('Failed to save settings');
+                toast.error(t('ai-plugin:configDashboard:failedToSave'));
             }
         }
         catch (error) {
             console.error('Error saving settings:', error);
-            toast.error('Error saving settings');
+            toast.error(t('ai-plugin:configDashboard:errorSaving'));
         }
         finally {
             setIsSaving(false);
         }
     };
     if (isLoading) {
-        return <div style={{ padding: '20px', textAlign: 'center' }}>Loading configuration...</div>;
+        return <div className={styles.loading}>{t('ai-plugin:configDashboard:loadingConfiguration')}</div>;
     }
-    return (<div style={{
-            background: 'var(--theme-elevation-50)',
-            // border: '1px solid var(--theme-elevation-150)',
-            // borderRadius: '8px',
-            // borderBottom: '1px solid var(--theme-elevation-150)',
-            // borderTop: '1px solid var(--theme-elevation-150)',
-            marginBottom: '20px',
-            overflow: 'hidden',
-        }}>
-      <div style={{
-            alignItems: 'center',
-            borderBottom: '1px solid var(--theme-elevation-150)',
-            display: 'flex',
-            justifyContent: 'space-between',
-            padding: '8px var(--gutter-h)',
-        }}>
+    return (<div className={styles.wrapper}>
+      <div className={styles.header}>
         <div>
-          <h2 style={{ margin: '0 0 5px 0' }}>Let's configure your AI Plugin</h2>
-          <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>
-            Set up the provider → Choose the content → Refine the behavior.
+          <h2 className={styles.title}>{t('ai-plugin:configDashboard:configureTitle')}</h2>
+          <p className={styles.subtitle}>
+            {t('ai-plugin:configDashboard:configureSubtitle')}
           </p>
         </div>
-        <div style={{ display: 'flex', gap: '10px' }}>
+        <div className={styles.headerActions}>
           <Button buttonStyle="secondary" el="link" to={`${adminRoute}/globals/ai-providers`}>
-            Providers
+            {t('ai-plugin:configDashboard:providers')}
           </Button>
           <Button disabled={isSaving} onClick={handleSave}>
-            {isSaving ? 'Saving...' : 'Save Changes'}
+            {isSaving ? t('ai-plugin:configDashboard:saving') : t('ai-plugin:configDashboard:saveChanges')}
           </Button>
         </div>
       </div>
 
-      <div style={{ padding: '24px var(--gutter-h)' }}>
-        <h5 style={{ marginBottom: '15px' }}>
-          Select the collections where AI features should be available, toggle them on or off, and
-          save your changes.
+      <div className={styles.body}>
+        <h5 className={styles.bodyTitle}>
+          {t('ai-plugin:configDashboard:selectCollectionsBody')}
         </h5>
-        <div style={{
-            display: 'grid',
-            gap: '15px',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
-        }}>
+        <div className={styles.grid}>
           {availableCollections.map((collection) => {
             const isEnabled = enabledCollections.includes(collection.slug);
-            return (<button key={collection.slug} onClick={() => handleToggle(collection.slug)} style={{
-                    alignItems: 'center',
-                    background: isEnabled
-                        ? 'var(--theme-elevation-100)'
-                        : 'var(--theme-elevation-50)',
-                    border: `1px solid ${isEnabled ? 'var(--theme-text-success)' : 'var(--theme-elevation-200)'}`,
-                    borderRadius: '6px',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    gap: '10px',
-                    padding: '10px 15px',
-                    textAlign: 'left',
-                    transition: 'all 0.2s ease',
-                    width: '100%',
-                }} type="button">
-                <div style={{
-                    alignItems: 'center',
-                    background: isEnabled
-                        ? 'var(--theme-text-success)'
-                        : 'var(--theme-elevation-200)',
-                    borderRadius: '12px',
-                    display: 'flex',
-                    height: '24px',
-                    justifyContent: isEnabled ? 'flex-end' : 'flex-start',
-                    padding: '2px',
-                    transition: 'all 0.2s ease',
-                    width: '44px',
-                }}>
-                  <div style={{
-                    background: 'white',
-                    borderRadius: '50%',
-                    height: '20px',
-                    width: '20px',
-                }}/>
+            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 style={{ fontWeight: 500 }}>
+                <span className={styles.toggleLabel}>
                   {typeof collection.labels?.singular === 'string'
                     ? collection.labels.singular
                     : collection.labels?.singular?.en || collection.slug}

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-providers?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-providers?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-providers?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-providers?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-providers?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-providers?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>);
 };