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

package/dist/ui/ConfigDashboard/index.jsx

@@ -0,0 +1,175 @@
+'use client';
+import { Button, toast, useConfig } 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';
+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 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();
+                    // Handle both simple array and object wrapper if Payload wraps it
+                    const storedEnabled = data.enabledCollections || [];
+                    setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : []);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch AI settings:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings().catch((e) => {
+            console.log(e);
+        });
+    }, [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 {
+            // 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,
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'POST',
+            });
+            if (response.ok) {
+                toast.success('Settings saved successfully');
+                if (setEnabledCollectionsInContext) {
+                    setEnabledCollectionsInContext(enabledCollections);
+                }
+                if (refresh) {
+                    await refresh();
+                }
+                router.refresh();
+            }
+            else {
+                toast.error('Failed to save settings');
+            }
+        }
+        catch (error) {
+            console.error('Error saving settings:', error);
+            toast.error('Error saving settings');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    if (isLoading) {
+        return <div style={{ padding: '20px', textAlign: 'center' }}>Loading configuration...</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)',
+        }}>
+        <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.
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Button buttonStyle="secondary" el="link" to={`${adminRoute}/globals/ai-providers`}>
+            Providers
+          </Button>
+          <Button disabled={isSaving} onClick={handleSave}>
+            {isSaving ? 'Saving...' : 'Save Changes'}
+          </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.
+        </h5>
+        <div style={{
+            display: 'grid',
+            gap: '15px',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+        }}>
+          {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',
+                }}/>
+                </div>
+                <span style={{ fontWeight: 500 }}>
+                  {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

@@ -94,7 +94,7 @@ export const DynamicModelSelect = (props)=>{
     useEffect(()=>{
         const fetchSettings = async ()=>{
             try {
-                const response = await fetch('/api/globals/ai-settings?depth=1');
+                const response = await fetch('/api/globals/ai-providers?depth=1');
                 if (response.ok) {
                     const data = await response.json();
                     if (data && data.providers) {

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":"AAAA;;AAEA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACrE,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAE3D,SAASC,iBAAiB,QAAQ,qCAAoC;AAOtE;;CAEC,GACD,SAASC,iBAAiBC,KAAU,EAAEC,SAAiB;IACrD,MAAMC,eAAe,CAACC;QACpB,KAAK,MAAMC,SAASD,OAAQ;YAC1B,IAAI,UAAUC,SAASA,MAAMC,IAAI,KAAKJ,WAAW;gBAC/C,OAAOG;YACT;YACA,IAAIA,MAAME,IAAI,KAAK,UAAU,UAAUF,OAAO;gBAC5C,KAAK,MAAMG,OAAOH,MAAMI,IAAI,CAAE;oBAC5B,MAAMC,QAAQP,aAAaK,IAAIJ,MAAM;oBACrC,IAAIM,OAAO;wBACT,OAAOA;oBACT;gBACF;YACF;YACA,IAAIL,MAAME,IAAI,KAAK,WAAW,YAAYF,OAAO;gBAC/C,MAAMK,QAAQP,aAAaE,MAAMD,MAAM;gBACvC,IAAIM,OAAO;oBACT,OAAOA;gBACT;YACF;QACF;QACA,OAAOC;IACT;IAEA,OAAOR,aAAaF,MAAMG,MAAM;AAClC;AAEA;;;;;CAKC,GACD,SAASQ,aAAaC,IAAY;IAChC,MAAMC,YAAYD,KAAKE,KAAK,CAAC;IAC7B,MAAMC,aAAaF,SAAS,CAACA,UAAUG,MAAM,GAAG,EAAE;IAElD,4DAA4D;IAC5D,wBAAwB;IACxB,IAAI;QAAC;QAAS;QAAQ;QAAO;KAAQ,CAACC,QAAQ,CAACF,aAAa;QAC1D,OAAOA;IACT;IAEA,uEAAuE;IACvE,IAAIA,eAAe,kBAAkB;QACnC,OAAO;IACT;IACA,IAAIA,eAAe,gBAAgB;QACjC,OAAO;IACT;IACA,IAAIA,eAAe,mBAAmBA,eAAe,qBAAqB;QACxE,OAAO;IACT;IACA,IAAIA,eAAe,kBAAkB;QACnC,OAAO;IACT;IAEA,kBAAkB;IAClB,OAAO;AACT;AAEA,OAAO,MAAMG,qBAAsC,CAACC;IAClD,MAAM,EAAEd,IAAI,EAAEO,IAAI,EAAE,GAAGO;IAEvB,6CAA6C;IAC7C,MAAMC,aAAaR,KAAKE,KAAK,CAAC,KAAKO,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACrD,MAAMC,eAAe,CAAC,EAAEH,WAAW,SAAS,CAAC;IAE7C,MAAMI,gBAAgB/B,cAAc,CAAC,CAACU,OAAO,GAAKA,MAAM,CAACoB,aAAa;IACtE,MAAME,gBAAgBD,eAAeE;IAErC,yFAAyF;IACzF,yEAAyE;IACzE,mDAAmD;IACnD,MAAMC,gBAAgBlC,cAAc,CAAC,CAACU,OAAO;QAC3C,MAAMyB,YAAiC,CAAC;QACxC,IAAIzB,UAAU,OAAOA,WAAW,UAAU;YACxC0B,OAAOC,IAAI,CAAC3B,QAAQ4B,OAAO,CAAC,CAACC;gBAC3B,IAAIA,IAAIC,UAAU,CAAC,eAAe;oBAChCL,SAAS,CAACI,IAAI,GAAG7B,MAAM,CAAC6B,IAAI;gBAC9B;YACF;QACF;QACA,OAAOJ;IACT;IAEA,MAAM,EAAEM,QAAQ,EAAER,KAAK,EAAE,GAAGlC,SAAiB;QAAEoB;IAAK;IAEpD,uCAAuC;IACvC,MAAM,CAACuB,eAAeC,iBAAiB,GAAGvC,SAAgB,EAAE;IAE5D,uDAAuD;IACvDF,UAAU;QACR,MAAM0C,gBAAgB;YACpB,IAAI;gBACF,MAAMC,WAAW,MAAMC,MAAM;gBAC7B,IAAID,SAASE,EAAE,EAAE;oBACf,MAAMC,OAAO,MAAMH,SAASI,IAAI;oBAChC,IAAID,QAAQA,KAAKb,SAAS,EAAE;wBAC1BQ,iBAAiBK,KAAKb,SAAS;oBACjC;gBACF;YACF,EAAE,OAAOe,OAAO;gBACdC,QAAQD,KAAK,CAAC,+BAA+BA;YAC/C;QACF;QAEAN,gBAAgBQ,KAAK,CAACD,QAAQD,KAAK;IACrC,GAAG,EAAE;IAEL,MAAMG,kBAAkBlD,QAAQ,IAAMe,aAAaC,OAAO;QAACA;KAAK;IAEhE,MAAMmC,UAAUnD,QAAQ;QACtB,IAAI,CAAC6B,eAAe;YAClB,OAAO,EAAE;QACX;QAEA,MAAMuB,cAAkD,EAAE;QAE1D,YAAY;QACZ,qEAAqE;QACrE,iGAAiG;QACjG,yDAAyD;QAEzD,IAAIC,cAAc;QAClB,IAAIC,aAAa;QAEjB,8BAA8B;QAC9B,kEAAkE;QAClE,kEAAkE;QAClE,kEAAkE;QAClE,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,IAAK;YAC3B,MAAMC,UAAU,CAAC,UAAU,EAAED,EAAE,UAAU,CAAC;YAC1C,MAAME,YAAY1B,aAAa,CAACyB,QAAQ;YAExC,IAAI,CAACC,WAAW;gBAAC;YAAK,EAAE,kCAAkC;YAE1D,IAAI,OAAOA,cAAc,YAAY,WAAWA,aAAaA,UAAU3B,KAAK,KAAKD,eAAe;gBAC9FwB,cAAc;gBACd,6CAA6C;gBAC7C,uCAAuC;gBACvC,IAAK,IAAIK,IAAI,GAAGA,IAAI,IAAIA,IAAK;oBAC3B,MAAMC,QAAQ,CAAC,UAAU,EAAEJ,EAAE,QAAQ,EAAEG,EAAE,GAAG,CAAC;oBAC7C,MAAME,UAAU,CAAC,UAAU,EAAEL,EAAE,QAAQ,EAAEG,EAAE,KAAK,CAAC;oBACjD,MAAMG,aAAa,CAAC,UAAU,EAAEN,EAAE,QAAQ,EAAEG,EAAE,QAAQ,CAAC;oBACvD,MAAMI,aAAa,CAAC,UAAU,EAAEP,EAAE,QAAQ,EAAEG,EAAE,QAAQ,CAAC;oBAEvD,MAAMK,UAAUhC,aAAa,CAAC4B,MAAM;oBACpC,IAAI,CAACI,SAAS;wBAAC;oBAAK,EAAE,yBAAyB;oBAE/C,MAAMC,UAAU,AAACD,QAASjC,KAAK;oBAC/B,MAAMmC,YAAalC,aAAa,CAAC6B,QAAQ,EAAG9B;oBAC5C,MAAMoC,eAAgBnC,aAAa,CAAC8B,WAAW,EAAG/B;oBAClD,MAAMqC,eAAgBpC,aAAa,CAAC+B,WAAW,EAAGhC;oBAElD,sEAAsE;oBACtE,IAAIoC,iBAAiBhB,mBAAmBiB,iBAAiB,OAAO;wBAC7Df,YAAYgB,IAAI,CAAC;4BACfC,OAAOJ,aAAaD;4BACpBlC,OAAOkC;wBACT;oBACH;gBACF;gBACA,OAAM,2BAA2B;YACnC;QACF;QAEA,oDAAoD;QACpD,IAAI,CAACX,aAAa;YAChB,MAAMiB,oBAAoB/B,cAAcgC,IAAI,CAAC,CAACC,IAAWA,EAAEC,SAAS,KAAK5C;YAEzE,IAAIyC,qBAAqBA,kBAAkBI,MAAM,EAAE;gBACjDpB,aAAa;gBACbgB,kBAAkBI,MAAM,CAACvC,OAAO,CAAC,CAACwC;oBAChC,IAAIA,EAAEC,OAAO,KAAK1B,mBAAmByB,EAAEE,OAAO,KAAK,OAAO;wBACxD,mBAAmB;wBACnB,IAAI,CAACzB,YAAY0B,IAAI,CAAC,CAACC,MAAQA,IAAIjD,KAAK,KAAK6C,EAAEK,EAAE,GAAG;4BAClD5B,YAAYgB,IAAI,CAAC;gCACfC,OAAOM,EAAElE,IAAI;gCACbqB,OAAO6C,EAAEK,EAAE;4BACb;wBACF;oBACF;gBACF;YACF;QACF;QAEA,2DAA2D;QAC3D,2FAA2F;QAC3F,iGAAiG;QACjG,IAAI,CAAC3B,eAAe,CAACC,YAAY;YAC/B,MAAM2B,cAAc/E,kBAAkBqE,IAAI,CAAC,CAACW,IAAMA,EAAEC,IAAI,KAAKtD;YAE7D,IAAIoD,aAAa;gBACf,2CAA2C;gBAC3C,MAAMG,cAAcjF,iBAAiB8E,aAAa;gBAClD,MAAMI,gBACJD,eAAe,kBAAkBA,cAAeA,YAAYE,YAAY,GAAa,EAAE;gBAEzFD,cAAclD,OAAO,CAAC,CAACwC;oBACrB,IAAIA,EAAEC,OAAO,KAAK1B,mBAAmByB,EAAEE,OAAO,KAAK,OAAO;wBACvDzB,YAAYgB,IAAI,CAAC;4BACfC,OAAOM,EAAElE,IAAI;4BACbqB,OAAO6C,EAAEK,EAAE;wBACb;oBACH;gBACF;YACF;QACF;QAEA,OAAO5B;IACT,GAAG;QAACvB;QAAeU;QAAeW;QAAiBnB;KAAc;IAEjE,qBACE,MAACwD;QAAIC,WAAU;;0BACb,KAACnB;gBAAMmB,WAAU;gBAAcC,SAASzE;0BAAM;;0BAG9C,KAACrB;gBACCc,MAAMA;gBACNiF,UAAU,CAACC;oBACT,IAAIA,UAAU,OAAOA,WAAW,YAAY,WAAWA,QAAQ;wBAC7DrD,SAASqD,OAAO7D,KAAK;oBACvB,OAAO;wBACLQ,SAASqD;oBACX;gBACF;gBACAxC,SAASA;gBACTnC,MAAMA;gBACNc,OAAOA;;;;AAIf,EAAC"}
+{"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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"}

package/dist/ui/DynamicModelSelect/index.jsx

@@ -88,7 +88,7 @@ export const DynamicModelSelect = (props) => {
     useEffect(() => {
         const fetchSettings = async () => {
             try {
-                const response = await fetch('/api/globals/ai-settings?depth=1');
+                const response = await fetch('/api/globals/ai-providers?depth=1');
                 if (response.ok) {
                     const data = await response.json();
                     if (data && data.providers) {

package/dist/ui/DynamicProviderSelect/index.js

@@ -14,7 +14,7 @@ export const DynamicProviderSelect = (props)=>{
     useEffect(()=>{
         const fetchSettings = async ()=>{
             try {
-                const response = await fetch('/api/globals/ai-settings?depth=1');
+                const response = await fetch('/api/globals/ai-providers?depth=1');
                 if (response.ok) {
                     const data = await response.json();
                     if (data && data.providers) {

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, { 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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"}

package/dist/ui/DynamicProviderSelect/index.jsx

@@ -11,7 +11,7 @@ export const DynamicProviderSelect = (props) => {
     useEffect(() => {
         const fetchSettings = async () => {
             try {
-                const response = await fetch('/api/globals/ai-settings?depth=1');
+                const response = await fetch('/api/globals/ai-providers?depth=1');
                 if (response.ok) {
                     const data = await response.json();
                     if (data && data.providers) {

package/dist/ui/DynamicVoiceSelect/index.js

@@ -6,27 +6,47 @@ export const DynamicVoiceSelect = (props)=>{
     const { name, path } = props;
     // Get provider from siblings
     const parentPath = path.split('.').slice(0, -1).join('.');
-    // Accessing provider from sibling data in a group
-    const providerField = useFormFields(([fields])=>fields[`${parentPath}.provider`]);
-    const provider = providerField?.value;
+    const providerPath = `${parentPath}.provider`;
+    // Use useFormFields to get the provider field value - this will re-render when provider changes
+    const providerField = useFormFields(([fields])=>fields[providerPath]);
+    const provider = providerField?.value || '';
     const { setValue, value } = useField({
         path
     });
     const [aiSettings, setAiSettings] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices
     useEffect(()=>{
-        fetch('/api/globals/ai-settings?depth=1').then((res)=>res.json()).then((data)=>setAiSettings(data)).catch((err)=>console.error('Error fetching AI settings:', err));
-    }, []);
+        const fetchSettings = async ()=>{
+            setIsLoading(true);
+            try {
+                const response = await fetch('/api/globals/ai-providers?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    setAiSettings(data);
+                }
+            } catch (err) {
+                console.error('Error fetching AI settings:', err);
+            } finally{
+                setIsLoading(false);
+            }
+        };
+        void fetchSettings();
+    }, [
+        provider
+    ]) // Re-fetch when provider changes to ensure we have the latest voices
+    ;
     const voices = useMemo(()=>{
-        if (!provider || !aiSettings) {
+        if (!provider || !aiSettings?.providers) {
             return [];
         }
-        const providerBlock = aiSettings.providers?.find((p)=>p.blockType === provider && p.enabled);
-        if (!providerBlock) {
+        // Find the provider block matching the selected provider
+        const providerBlock = aiSettings.providers.find((p)=>p.blockType === provider && p.enabled !== false);
+        if (!providerBlock?.voices) {
             return [];
         }
-        // Get voices from provider block
-        const voicesArray = providerBlock.voices || [];
-        return voicesArray.filter((v)=>v.enabled !== false).map((v)=>({
+        // Get enabled voices from provider block
+        return providerBlock.voices.filter((v)=>v.enabled !== false).map((v)=>({
                 label: v.name || v.id,
                 value: v.id
             }));
@@ -34,6 +54,19 @@ export const DynamicVoiceSelect = (props)=>{
         provider,
         aiSettings
     ]);
+    // Clear voice selection when provider changes and current voice is not available
+    useEffect(()=>{
+        if (value && voices.length > 0) {
+            const voiceExists = voices.some((v)=>v.value === value);
+            if (!voiceExists) {
+                setValue('');
+            }
+        }
+    }, [
+        voices,
+        value,
+        setValue
+    ]);
     if (!provider) {
         return /*#__PURE__*/ _jsxs("div", {
             className: "field-type text",
@@ -53,6 +86,25 @@ export const DynamicVoiceSelect = (props)=>{
             ]
         });
     }
+    if (isLoading) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type text",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: path,
+                    children: "Voice"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-600)',
+                        fontSize: '13px'
+                    },
+                    children: "Loading voices..."
+                })
+            ]
+        });
+    }
     if (voices.length === 0) {
         return /*#__PURE__*/ _jsxs("div", {
             className: "field-type text",

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

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

package/dist/ui/DynamicVoiceSelect/index.jsx

@@ -5,34 +5,59 @@ export const DynamicVoiceSelect = (props) => {
     const { name, path } = props;
     // Get provider from siblings
     const parentPath = path.split('.').slice(0, -1).join('.');
-    // Accessing provider from sibling data in a group
-    const providerField = useFormFields(([fields]) => fields[`${parentPath}.provider`]);
-    const provider = providerField?.value;
+    const providerPath = `${parentPath}.provider`;
+    // Use useFormFields to get the provider field value - this will re-render when provider changes
+    const providerField = useFormFields(([fields]) => fields[providerPath]);
+    const provider = providerField?.value || '';
     const { setValue, value } = useField({ path });
     const [aiSettings, setAiSettings] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices
     useEffect(() => {
-        fetch('/api/globals/ai-settings?depth=1')
-            .then((res) => res.json())
-            .then((data) => setAiSettings(data))
-            .catch((err) => console.error('Error fetching AI settings:', err));
-    }, []);
+        const fetchSettings = async () => {
+            setIsLoading(true);
+            try {
+                const response = await fetch('/api/globals/ai-providers?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    setAiSettings(data);
+                }
+            }
+            catch (err) {
+                console.error('Error fetching AI settings:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        void fetchSettings();
+    }, [provider]); // Re-fetch when provider changes to ensure we have the latest voices
     const voices = useMemo(() => {
-        if (!provider || !aiSettings) {
+        if (!provider || !aiSettings?.providers) {
             return [];
         }
-        const providerBlock = aiSettings.providers?.find((p) => p.blockType === provider && p.enabled);
-        if (!providerBlock) {
+        // Find the provider block matching the selected provider
+        const providerBlock = aiSettings.providers.find((p) => p.blockType === provider && p.enabled !== false);
+        if (!providerBlock?.voices) {
             return [];
         }
-        // Get voices from provider block
-        const voicesArray = providerBlock.voices || [];
-        return voicesArray
+        // Get enabled voices from provider block
+        return providerBlock.voices
             .filter((v) => v.enabled !== false)
             .map((v) => ({
             label: v.name || v.id,
             value: v.id,
         }));
     }, [provider, aiSettings]);
+    // Clear voice selection when provider changes and current voice is not available
+    useEffect(() => {
+        if (value && voices.length > 0) {
+            const voiceExists = voices.some((v) => v.value === value);
+            if (!voiceExists) {
+                setValue('');
+            }
+        }
+    }, [voices, value, setValue]);
     if (!provider) {
         return (<div className="field-type text">
         <label className="field-label" htmlFor={path}>
@@ -43,6 +68,14 @@ export const DynamicVoiceSelect = (props) => {
         </p>
       </div>);
     }
+    if (isLoading) {
+        return (<div className="field-type text">
+        <label className="field-label" htmlFor={path}>
+          Voice
+        </label>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>Loading voices...</p>
+      </div>);
+    }
     if (voices.length === 0) {
         return (<div className="field-type text">
         <label className="field-label" htmlFor={path}>

package/dist/ui/EncryptedTextField/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField } from '@payloadcms/ui';
+import { Button, useField } from '@payloadcms/ui';
 import React, { useState } from 'react';
 export const EncryptedTextField = ({ label, path, required })=>{
     const { setValue, value } = useField({
@@ -48,13 +48,13 @@ export const EncryptedTextField = ({ label, path, required })=>{
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsx("button", {
-                        className: "btn btn--style-secondary btn--size-small",
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "secondary",
                         onClick: ()=>{
                             setValue('');
                             setIsEditing(true);
                         },
-                        type: "button",
+                        size: "medium",
                         children: "Change"
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/EncryptedTextField/index.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useState } from 'react'\n\ntype Props = {\n  label?: string\n  path: string\n  required?: boolean\n}\n\nexport const EncryptedTextField: React.FC<Props> = ({ label, path, required }) => {\n  const { setValue, value } = useField<string>({ path })\n  const [isEditing, setIsEditing] = useState(!value)\n\n  const isMasked = typeof value === 'string' && value.startsWith('sk-') && value.includes('****')\n\n  return (\n    <div className=\"field-type text\">\n      <label className=\"field-label\">\n        {label || 'API Key'}\n        {required && <span className=\"required\">*</span>}\n      </label>\n\n      {!isEditing && isMasked ? (\n        <div style={{ alignItems: 'center', display: 'flex', gap: '10px' }}>\n          <div\n            style={{\n              background: 'var(--theme-elevation-100)',\n              borderRadius: '4px',\n              flexGrow: 1,\n              fontFamily: 'monospace',\n              padding: '8px 12px',\n            }}\n          >\n            {value}\n            <span\n              style={{ color: 'var(--theme-success-500)', fontSize: '0.8em', marginLeft: '10px' }}\n            >\n              ✓ Configured\n            </span>\n          </div>\n          <button\n            className=\"btn btn--style-secondary btn--size-small\"\n            onClick={() => {\n              setValue('')\n              setIsEditing(true)\n            }}\n            type=\"button\"\n          >\n            Change\n          </button>\n        </div>\n      ) : (\n        <input\n          onChange={(e) => setValue(e.target.value)}\n          placeholder=\"sk-...\"\n          style={{ width: '100%' }}\n          type=\"password\"\n          value={value || ''}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["useField","React","useState","EncryptedTextField","label","path","required","setValue","value","isEditing","setIsEditing","isMasked","startsWith","includes","div","className","span","style","alignItems","display","gap","background","borderRadius","flexGrow","fontFamily","padding","color","fontSize","marginLeft","button","onClick","type","input","onChange","e","target","placeholder","width"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AACzC,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAQvC,OAAO,MAAMC,qBAAsC,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAE;IAC3E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGR,SAAiB;QAAEK;IAAK;IACpD,MAAM,CAACI,WAAWC,aAAa,GAAGR,SAAS,CAACM;IAE5C,MAAMG,WAAW,OAAOH,UAAU,YAAYA,MAAMI,UAAU,CAAC,UAAUJ,MAAMK,QAAQ,CAAC;IAExF,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACX;gBAAMW,WAAU;;oBACdX,SAAS;oBACTE,0BAAY,KAACU;wBAAKD,WAAU;kCAAW;;;;YAGzC,CAACN,aAAaE,yBACb,MAACG;gBAAIG,OAAO;oBAAEC,YAAY;oBAAUC,SAAS;oBAAQC,KAAK;gBAAO;;kCAC/D,MAACN;wBACCG,OAAO;4BACLI,YAAY;4BACZC,cAAc;4BACdC,UAAU;4BACVC,YAAY;4BACZC,SAAS;wBACX;;4BAECjB;0CACD,KAACQ;gCACCC,OAAO;oCAAES,OAAO;oCAA4BC,UAAU;oCAASC,YAAY;gCAAO;0CACnF;;;;kCAIH,KAACC;wBACCd,WAAU;wBACVe,SAAS;4BACPvB,SAAS;4BACTG,aAAa;wBACf;wBACAqB,MAAK;kCACN;;;+BAKH,KAACC;gBACCC,UAAU,CAACC,IAAM3B,SAAS2B,EAAEC,MAAM,CAAC3B,KAAK;gBACxC4B,aAAY;gBACZnB,OAAO;oBAAEoB,OAAO;gBAAO;gBACvBN,MAAK;gBACLvB,OAAOA,SAAS;;;;AAK1B,EAAC"}
+{"version":3,"sources":["../../../src/ui/EncryptedTextField/index.tsx"],"sourcesContent":["'use client'\n\nimport { Button, useField } from '@payloadcms/ui'\nimport React, { useState } from 'react'\n\ntype Props = {\n  label?: string\n  path: string\n  required?: boolean\n}\n\nexport const EncryptedTextField: React.FC<Props> = ({ label, path, required }) => {\n  const { setValue, value } = useField<string>({ path })\n  const [isEditing, setIsEditing] = useState(!value)\n\n  const isMasked = typeof value === 'string' && value.startsWith('sk-') && value.includes('****')\n\n  return (\n    <div className=\"field-type text\">\n      <label className=\"field-label\">\n        {label || 'API Key'}\n        {required && <span className=\"required\">*</span>}\n      </label>\n\n      {!isEditing && isMasked ? (\n        <div style={{ alignItems: 'center', display: 'flex', gap: '10px' }}>\n          <div\n            style={{\n              background: 'var(--theme-elevation-100)',\n              borderRadius: '4px',\n              flexGrow: 1,\n              fontFamily: 'monospace',\n              padding: '8px 12px',\n            }}\n          >\n            {value}\n            <span\n              style={{ color: 'var(--theme-success-500)', fontSize: '0.8em', marginLeft: '10px' }}\n            >\n              ✓ Configured\n            </span>\n          </div>\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              setValue('')\n              setIsEditing(true)\n            }}\n            size=\"medium\"\n          >\n            Change\n          </Button>\n        </div>\n      ) : (\n        <input\n          onChange={(e) => setValue(e.target.value)}\n          placeholder=\"sk-...\"\n          style={{ width: '100%' }}\n          type=\"password\"\n          value={value || ''}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["Button","useField","React","useState","EncryptedTextField","label","path","required","setValue","value","isEditing","setIsEditing","isMasked","startsWith","includes","div","className","span","style","alignItems","display","gap","background","borderRadius","flexGrow","fontFamily","padding","color","fontSize","marginLeft","buttonStyle","onClick","size","input","onChange","e","target","placeholder","width","type"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,QAAQ,QAAQ,iBAAgB;AACjD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAQvC,OAAO,MAAMC,qBAAsC,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAE;IAC3E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGR,SAAiB;QAAEK;IAAK;IACpD,MAAM,CAACI,WAAWC,aAAa,GAAGR,SAAS,CAACM;IAE5C,MAAMG,WAAW,OAAOH,UAAU,YAAYA,MAAMI,UAAU,CAAC,UAAUJ,MAAMK,QAAQ,CAAC;IAExF,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACX;gBAAMW,WAAU;;oBACdX,SAAS;oBACTE,0BAAY,KAACU;wBAAKD,WAAU;kCAAW;;;;YAGzC,CAACN,aAAaE,yBACb,MAACG;gBAAIG,OAAO;oBAAEC,YAAY;oBAAUC,SAAS;oBAAQC,KAAK;gBAAO;;kCAC/D,MAACN;wBACCG,OAAO;4BACLI,YAAY;4BACZC,cAAc;4BACdC,UAAU;4BACVC,YAAY;4BACZC,SAAS;wBACX;;4BAECjB;0CACD,KAACQ;gCACCC,OAAO;oCAAES,OAAO;oCAA4BC,UAAU;oCAASC,YAAY;gCAAO;0CACnF;;;;kCAIH,KAAC7B;wBACC8B,aAAY;wBACZC,SAAS;4BACPvB,SAAS;4BACTG,aAAa;wBACf;wBACAqB,MAAK;kCACN;;;+BAKH,KAACC;gBACCC,UAAU,CAACC,IAAM3B,SAAS2B,EAAEC,MAAM,CAAC3B,KAAK;gBACxC4B,aAAY;gBACZnB,OAAO;oBAAEoB,OAAO;gBAAO;gBACvBC,MAAK;gBACL9B,OAAOA,SAAS;;;;AAK1B,EAAC"}