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

package/dist/ui/Compose/hooks/menu/useMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/useMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { ActionMenuItems, UseMenuEvents, UseMenuOptions } from '../../../../types.js'\n\nimport { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js'\nimport { Compose, Proofread, Rephrase } from './items.js'\nimport { menuItemsMap } from './itemsMap.js'\nimport styles from './menu.module.scss'\n\nconst getActiveComponent = (ac: ActionMenuItems) => {\n  switch (ac) {\n    case 'Compose':\n      return Compose\n    case 'Proofread':\n      return Proofread\n    case 'Rephrase':\n      return Rephrase\n    default:\n      return Rephrase\n  }\n}\n\nexport const useMenu = (menuEvents: UseMenuEvents, options: UseMenuOptions) => {\n  const { field:{ type: fieldType } = {}, path: pathFromContext } = useFieldProps()\n  const field = useField({ path: pathFromContext ?? '' })\n  const [activeComponent, setActiveComponent] = useState<ActionMenuItems>('Rephrase')\n\n  const { initialValue, value } = field\n\n  useEffect(() => {\n    if (!value) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (typeof value === 'string' && value !== initialValue) {\n      setActiveComponent('Proofread')\n    } else {\n      setActiveComponent('Rephrase')\n    }\n  }, [initialValue, value, fieldType])\n\n  const MemoizedActiveComponent = useMemo(() => {\n    return ({ isLoading, loadingLabel, stop }: { isLoading: boolean; loadingLabel?: string; stop: () => void }) => {\n      const ActiveComponent = getActiveComponent(activeComponent)\n      const activeItem = menuItemsMap.find((i) => i.name === activeComponent)!\n      return (\n        <ActiveComponent\n          hideIcon\n          onClick={(data: unknown) => {\n            if (!isLoading) {\n              const trigger = menuEvents[`on${activeComponent}`]\n              if (typeof trigger === 'function') {\n                trigger(data)\n              } else {\n                console.error('No trigger found for', activeComponent)\n              }\n            } else {\n              stop()\n            }\n          }}\n          title={isLoading ? 'Click to stop' : activeItem.name}\n        >\n          {isLoading && (loadingLabel ?? activeItem.loadingText)}\n        </ActiveComponent>\n      )\n    }\n  }, [activeComponent, menuEvents])\n\n  const filteredMenuItems = useMemo(\n    () =>\n      menuItemsMap.filter((i) => {\n        if (i.name === 'Settings' && !options.isConfigAllowed) {\n          return false\n        } // Disable settings if a user role is not permitted\n        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '')\n      }),\n    [activeComponent, fieldType, options.isConfigAllowed],\n  )\n\n  const MemoizedMenu = useMemo(() => {\n    return ({ isLoading, onClose }: { isLoading: boolean; onClose: () => void }) => (\n      <div className={styles.menu}>\n        {filteredMenuItems.map((i) => {\n          const Action = i.component\n          return (\n            <Action\n              disabled={isLoading}\n              key={i.name}\n              onClick={(data: unknown) => {\n                if (i.name !== 'Settings') {\n                  setActiveComponent(i.name)\n                }\n\n                menuEvents[`on${i.name}`]?.(data)\n                onClose()\n              }}\n            >\n              {isLoading && i.loadingText}\n            </Action>\n          )\n        })}\n      </div>\n    )\n  }, [filteredMenuItems, menuEvents])\n\n  return {\n    ActiveComponent: MemoizedActiveComponent,\n    Menu: MemoizedMenu,\n  }\n}\n"],"names":["useField","React","useEffect","useMemo","useState","useFieldProps","Compose","Proofread","Rephrase","menuItemsMap","styles","getActiveComponent","ac","useMenu","menuEvents","options","field","type","fieldType","path","pathFromContext","activeComponent","setActiveComponent","initialValue","value","some","i","excludedFor","includes","MemoizedActiveComponent","isLoading","loadingLabel","stop","ActiveComponent","activeItem","find","name","hideIcon","onClick","data","trigger","console","error","title","loadingText","filteredMenuItems","filter","isConfigAllowed","MemoizedMenu","onClose","div","className","menu","map","Action","component","disabled","Menu"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/useMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useForm } from '@payloadcms/ui'\nimport { getSiblingData } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { ActionMenuItems, UseMenuEvents, UseMenuOptions } from '../../../../types.js'\n\nimport { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js'\nimport { Compose, Proofread, Rephrase } from './items.js'\nimport { menuItemsMap } from './itemsMap.js'\nimport styles from './menu.module.scss'\n\nconst getActiveComponent = (ac: ActionMenuItems) => {\n  switch (ac) {\n    case 'Compose':\n      return Compose\n    case 'Proofread':\n      return Proofread\n    case 'Rephrase':\n      return Rephrase\n    default:\n      return Rephrase\n  }\n}\n\nexport const useMenu = (menuEvents: UseMenuEvents, options: UseMenuOptions) => {\n  const { field: { type: fieldType } = {}, path } = useFieldProps()\n  const { getData } = useForm()\n  const [activeComponent, setActiveComponent] = useState<ActionMenuItems>('Rephrase')\n\n  // Check value once on mount or when path/type changes\n  useEffect(() => {\n    let hasValue = false\n\n    try {\n      const data = getData()\n      if (path) {\n        const val = getSiblingData(data, path)\n        hasValue = val !== undefined && val !== null\n        // For richTextFields, we might need a more robust check (e.g. check for root.children.length > 0)\n        // But for now, simple truthiness covers most cases or at least defaults safely\n        if (fieldType === 'richText' && val && typeof val === 'object' && 'root' in val) {\n           // Basic lexical check could go here if needed\n        }\n      }\n    } catch (e) {\n      // ignore\n    }\n\n    if (!hasValue) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    // Default to Rephrase if value exists\n    setActiveComponent('Rephrase')\n  }, [fieldType, getData, path])\n\n  const MemoizedActiveComponent = useMemo(() => {\n    return ({ isLoading, loadingLabel, stop }: { isLoading: boolean; loadingLabel?: string; stop: () => void }) => {\n      const ActiveComponent = getActiveComponent(activeComponent)\n      const activeItem = menuItemsMap.find((i) => i.name === activeComponent)!\n      return (\n        <ActiveComponent\n          hideIcon\n          onClick={(data: unknown) => {\n            if (!isLoading) {\n              const trigger = menuEvents[`on${activeComponent}`]\n              if (typeof trigger === 'function') {\n                trigger(data)\n              } else {\n                console.error('No trigger found for', activeComponent)\n              }\n            } else {\n              stop()\n            }\n          }}\n          title={isLoading ? 'Click to stop' : activeItem.name}\n        >\n          {isLoading && (loadingLabel ?? activeItem.loadingText)}\n        </ActiveComponent>\n      )\n    }\n  }, [activeComponent, menuEvents])\n\n  const filteredMenuItems = useMemo(\n    () =>\n      menuItemsMap.filter((i) => {\n        if (i.name === 'Settings' && !options.isConfigAllowed) {\n          return false\n        } // Disable settings if a user role is not permitted\n        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '')\n      }),\n    [activeComponent, fieldType, options.isConfigAllowed],\n  )\n\n  const MemoizedMenu = useMemo(() => {\n    return ({ isLoading, onClose }: { isLoading: boolean; onClose: () => void }) => (\n      <div className={styles.menu}>\n        {filteredMenuItems.map((i) => {\n          const Action = i.component\n          return (\n            <Action\n              disabled={isLoading}\n              key={i.name}\n              onClick={(data: unknown) => {\n                if (i.name !== 'Settings') {\n                  setActiveComponent(i.name)\n                }\n\n                menuEvents[`on${i.name}`]?.(data)\n                onClose()\n              }}\n            >\n              {isLoading && i.loadingText}\n            </Action>\n          )\n        })}\n      </div>\n    )\n  }, [filteredMenuItems, menuEvents])\n\n  return {\n    ActiveComponent: MemoizedActiveComponent,\n    Menu: MemoizedMenu,\n  }\n}\n\n"],"names":["useForm","getSiblingData","React","useEffect","useMemo","useState","useFieldProps","Compose","Proofread","Rephrase","menuItemsMap","styles","getActiveComponent","ac","useMenu","menuEvents","options","field","type","fieldType","path","getData","activeComponent","setActiveComponent","hasValue","data","val","undefined","e","some","i","excludedFor","includes","MemoizedActiveComponent","isLoading","loadingLabel","stop","ActiveComponent","activeItem","find","name","hideIcon","onClick","trigger","console","error","title","loadingText","filteredMenuItems","filter","isConfigAllowed","MemoizedMenu","onClose","div","className","menu","map","Action","component","disabled","Menu"],"mappings":"AAAA;;AAEA,SAASA,OAAO,QAAQ,iBAAgB;AACxC,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI3D,SAASC,aAAa,QAAQ,uDAAsD;AACpF,SAASC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,aAAY;AACzD,SAASC,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,YAAY,qBAAoB;AAEvC,MAAMC,qBAAqB,CAACC;IAC1B,OAAQA;QACN,KAAK;YACH,OAAON;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC;QACT;YACE,OAAOA;IACX;AACF;AAEA,OAAO,MAAMK,UAAU,CAACC,YAA2BC;IACjD,MAAM,EAAEC,OAAO,EAAEC,MAAMC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAGd;IAClD,MAAM,EAAEe,OAAO,EAAE,GAAGrB;IACpB,MAAM,CAACsB,iBAAiBC,mBAAmB,GAAGlB,SAA0B;IAExE,sDAAsD;IACtDF,UAAU;QACR,IAAIqB,WAAW;QAEf,IAAI;YACF,MAAMC,OAAOJ;YACb,IAAID,MAAM;gBACR,MAAMM,MAAMzB,eAAewB,MAAML;gBACjCI,WAAWE,QAAQC,aAAaD,QAAQ;gBACxC,kGAAkG;gBAClG,+EAA+E;gBAC/E,IAAIP,cAAc,cAAcO,OAAO,OAAOA,QAAQ,YAAY,UAAUA,KAAK;gBAC9E,8CAA8C;gBACjD;YACF;QACF,EAAE,OAAOE,GAAG;QACV,SAAS;QACX;QAEA,IAAI,CAACJ,UAAU;YACbD,mBAAmB;YACnB;QACF;QAEA,IAAIb,aAAamB,IAAI,CAAC,CAACC,IAAMA,EAAEC,WAAW,EAAEC,SAASb,aAAa,MAAM;YACtEI,mBAAmB;YACnB;QACF;QAEA,sCAAsC;QACtCA,mBAAmB;IACrB,GAAG;QAACJ;QAAWE;QAASD;KAAK;IAE7B,MAAMa,0BAA0B7B,QAAQ;QACtC,OAAO,CAAC,EAAE8B,SAAS,EAAEC,YAAY,EAAEC,IAAI,EAAmE;YACxG,MAAMC,kBAAkBzB,mBAAmBU;YAC3C,MAAMgB,aAAa5B,aAAa6B,IAAI,CAAC,CAACT,IAAMA,EAAEU,IAAI,KAAKlB;YACvD,qBACE,KAACe;gBACCI,QAAQ;gBACRC,SAAS,CAACjB;oBACR,IAAI,CAACS,WAAW;wBACd,MAAMS,UAAU5B,UAAU,CAAC,CAAC,EAAE,EAAEO,gBAAgB,CAAC,CAAC;wBAClD,IAAI,OAAOqB,YAAY,YAAY;4BACjCA,QAAQlB;wBACV,OAAO;4BACLmB,QAAQC,KAAK,CAAC,wBAAwBvB;wBACxC;oBACF,OAAO;wBACLc;oBACF;gBACF;gBACAU,OAAOZ,YAAY,kBAAkBI,WAAWE,IAAI;0BAEnDN,aAAcC,CAAAA,gBAAgBG,WAAWS,WAAW,AAAD;;QAG1D;IACF,GAAG;QAACzB;QAAiBP;KAAW;IAEhC,MAAMiC,oBAAoB5C,QACxB,IACEM,aAAauC,MAAM,CAAC,CAACnB;YACnB,IAAIA,EAAEU,IAAI,KAAK,cAAc,CAACxB,QAAQkC,eAAe,EAAE;gBACrD,OAAO;YACT,EAAE,mDAAmD;YACrD,OAAOpB,EAAEU,IAAI,KAAKlB,mBAAmB,CAACQ,EAAEC,WAAW,EAAEC,SAASb,aAAa;QAC7E,IACF;QAACG;QAAiBH;QAAWH,QAAQkC,eAAe;KAAC;IAGvD,MAAMC,eAAe/C,QAAQ;QAC3B,OAAO,CAAC,EAAE8B,SAAS,EAAEkB,OAAO,EAA+C,iBACzE,KAACC;gBAAIC,WAAW3C,OAAO4C,IAAI;0BACxBP,kBAAkBQ,GAAG,CAAC,CAAC1B;oBACtB,MAAM2B,SAAS3B,EAAE4B,SAAS;oBAC1B,qBACE,KAACD;wBACCE,UAAUzB;wBAEVQ,SAAS,CAACjB;4BACR,IAAIK,EAAEU,IAAI,KAAK,YAAY;gCACzBjB,mBAAmBO,EAAEU,IAAI;4BAC3B;4BAEAzB,UAAU,CAAC,CAAC,EAAE,EAAEe,EAAEU,IAAI,CAAC,CAAC,CAAC,GAAGf;4BAC5B2B;wBACF;kCAEClB,aAAaJ,EAAEiB,WAAW;uBAVtBjB,EAAEU,IAAI;gBAajB;;IAGN,GAAG;QAACQ;QAAmBjC;KAAW;IAElC,OAAO;QACLsB,iBAAiBJ;QACjB2B,MAAMT;IACR;AACF,EAAC"}

package/dist/ui/Compose/hooks/menu/useMenu.jsx

@@ -1,5 +1,6 @@
 'use client';
-import { useField } from '@payloadcms/ui';
+import { useForm } from '@payloadcms/ui';
+import { getSiblingData } from 'payload/shared';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js';
 import { Compose, Proofread, Rephrase } from './items.js';
@@ -18,12 +19,28 @@ const getActiveComponent = (ac) => {
     }
 };
 export const useMenu = (menuEvents, options) => {
-    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
-    const field = useField({ path: pathFromContext ?? '' });
+    const { field: { type: fieldType } = {}, path } = useFieldProps();
+    const { getData } = useForm();
     const [activeComponent, setActiveComponent] = useState('Rephrase');
-    const { initialValue, value } = field;
+    // Check value once on mount or when path/type changes
     useEffect(() => {
-        if (!value) {
+        let hasValue = false;
+        try {
+            const data = getData();
+            if (path) {
+                const val = getSiblingData(data, path);
+                hasValue = val !== undefined && val !== null;
+                // For richTextFields, we might need a more robust check (e.g. check for root.children.length > 0)
+                // But for now, simple truthiness covers most cases or at least defaults safely
+                if (fieldType === 'richText' && val && typeof val === 'object' && 'root' in val) {
+                    // Basic lexical check could go here if needed
+                }
+            }
+        }
+        catch (e) {
+            // ignore
+        }
+        if (!hasValue) {
             setActiveComponent('Compose');
             return;
         }
@@ -31,13 +48,9 @@ export const useMenu = (menuEvents, options) => {
             setActiveComponent('Compose');
             return;
         }
-        if (typeof value === 'string' && value !== initialValue) {
-            setActiveComponent('Proofread');
-        }
-        else {
-            setActiveComponent('Rephrase');
-        }
-    }, [initialValue, value, fieldType]);
+        // Default to Rephrase if value exists
+        setActiveComponent('Rephrase');
+    }, [fieldType, getData, path]);
     const MemoizedActiveComponent = useMemo(() => {
         return ({ isLoading, loadingLabel, stop }) => {
             const ActiveComponent = getActiveComponent(activeComponent);

package/dist/ui/Compose/hooks/useHistory.d.ts

@@ -1,7 +1,6 @@
 export declare const useHistory: () => {
     canRedo: boolean;
     canUndo: boolean;
-    currentValue: any;
     redo: () => any;
     set: (data: any) => any;
     undo: () => any;

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

@@ -1,17 +1,17 @@
 'use client';
-import { useDocumentInfo, useField } from '@payloadcms/ui';
+import { useDocumentInfo, useForm } from '@payloadcms/ui';
 import { useCallback, useEffect, useRef } from 'react';
+import { getSiblingData } from 'payload/shared';
 import { PLUGIN_NAME } from '../../../defaults.js';
 import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
 const STORAGE_KEY = `${PLUGIN_NAME}-fields-history`;
+const MAX_HISTORY_SIZE = 50;
 // Global cache to prevent synchronous localStorage reads on every render
 let globalHistoryCache = null;
 export const useHistory = ()=>{
     const { id } = useDocumentInfo();
-    const { path: pathFromContext, schemaPath } = useFieldProps();
-    const { value: currentFieldValue } = useField({
-        path: pathFromContext ?? ''
-    });
+    const { path, schemaPath } = useFieldProps();
+    const { getData } = useForm();
     const fieldKey = `${id}.${schemaPath}`;
     const getLatestHistory = useCallback(()=>{
         // Return cache if available
@@ -43,21 +43,29 @@ export const useHistory = ()=>{
         if (saveTimerRef.current) {
             clearTimeout(saveTimerRef.current);
         }
-        // Debounce the save operation by 300ms
+        // Debounce the save operation by 500ms
         saveTimerRef.current = setTimeout(()=>{
             // Use requestIdleCallback if available to avoid blocking the main thread
             if (typeof requestIdleCallback !== 'undefined') {
                 requestIdleCallback(()=>{
-                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+                    try {
+                        localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+                    } catch (e) {
+                        console.warn('Failed to save history to localStorage', e);
+                    }
                 }, {
                     timeout: 2000
                 });
             } else {
                 // Fallback for browsers without requestIdleCallback
-                localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+                try {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+                } catch (e) {
+                    console.warn('Failed to save history to localStorage', e);
+                }
             }
             saveTimerRef.current = null;
-        }, 300);
+        }, 500);
     }, []);
     // Sync with other tabs
     useEffect(()=>{
@@ -80,15 +88,18 @@ export const useHistory = ()=>{
         const latestHistory = {
             ...getLatestHistory()
         };
+        let hasChanges = false;
         Object.keys(latestHistory).forEach((k)=>{
             if (!k.startsWith(id?.toString() ?? '')) {
                 delete latestHistory[k];
+                hasChanges = true;
             }
         });
-        saveToLocalStorage(latestHistory);
+        if (hasChanges) {
+            saveToLocalStorage(latestHistory);
+        }
     }, [
         id,
-        fieldKey,
         getLatestHistory,
         saveToLocalStorage
     ]);
@@ -101,22 +112,46 @@ export const useHistory = ()=>{
             history: []
         };
         let newIndex = currentIndex;
+        let historyUpdated = false;
+        const newHistoryArray = [
+            ...history
+        ];
         if (currentIndex == -1) {
             newIndex = 0;
-            if (currentFieldValue) {
-                history[newIndex] = currentFieldValue;
+            // Get initial value from form data instead of subscribing to useField
+            // This implementation avoids re-rendering on every keystroke
+            try {
+                const data = getData();
+                // We need to resolve the value from the data object using the path
+                // path might be 'group.subgroup.field'
+                if (path) {
+                    const value = getSiblingData(data, path);
+                    if (value) {
+                        newHistoryArray[newIndex] = value;
+                        historyUpdated = true;
+                    }
+                }
+            } catch (e) {
+            // If we can't get the data, just ignore
             }
         }
-        const newGlobalHistory = {
-            ...latestHistory,
-            [fieldKey]: {
-                currentIndex: newIndex,
-                history
-            }
-        };
-        saveToLocalStorage(newGlobalHistory);
+        if (historyUpdated) {
+            const newGlobalHistory = {
+                ...latestHistory,
+                [fieldKey]: {
+                    currentIndex: newIndex,
+                    history: newHistoryArray
+                }
+            };
+            saveToLocalStorage(newGlobalHistory);
+        }
     }, [
-        fieldKey
+        fieldKey,
+        getData,
+        path,
+        clearHistory,
+        getLatestHistory,
+        saveToLocalStorage
     ]);
     const set = useCallback((data)=>{
         const latestHistory = getLatestHistory();
@@ -124,10 +159,15 @@ export const useHistory = ()=>{
             currentIndex: -1,
             history: []
         };
-        const newHistory = [
+        // Create new history array slice, appending new data
+        let newHistory = [
             ...history.slice(0, currentIndex + 1),
             data
         ];
+        // Enforce Max History Size
+        if (newHistory.length > MAX_HISTORY_SIZE) {
+            newHistory = newHistory.slice(newHistory.length - MAX_HISTORY_SIZE);
+        }
         const newGlobalHistory = {
             ...latestHistory,
             [fieldKey]: {
@@ -205,11 +245,11 @@ export const useHistory = ()=>{
     const fieldHistory = getLatestFieldHistory();
     const canUndo = fieldHistory.currentIndex > 0;
     const canRedo = fieldHistory.currentIndex < fieldHistory.history.length - 1;
-    const currentValue = fieldHistory.history[fieldHistory.currentIndex];
+    // Note: We deliberately do not return currentValue to avoid subscription re-renders
+    // The consumers of this hook (UndoRedoActions) didn't use it anyway.
     return {
         canRedo,
         canUndo,
-        currentValue,
         redo,
         set,
         undo

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

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

package/dist/ui/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-settings?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-settings?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-settings?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}>