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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useGenerateUpload.ts"],"sourcesContent":["import { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui'\nimport { type RefObject, useCallback, useState } from 'react'\n\nimport type { GenerateTextarea } from '../../../types.js'\n\nimport { PLUGIN_AI_JOBS_TABLE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD } from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\nimport { useHistory } from './useHistory.js'\n\ntype UseGenerateUploadParams = {\n  instructionIdRef: RefObject<string>\n}\n\nexport const useGenerateUpload = ({ instructionIdRef }: UseGenerateUploadParams) => {\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n  const { id: documentId, collectionSlug } = useDocumentInfo()\n  const localFromContext = useLocale()\n  const { getData } = useForm()\n  const { set: setHistory } = useHistory()\n\n  const { field, path: pathFromContext } = useFieldProps()\n  const { setValue } = useField<any>({\n    path: pathFromContext ?? '',\n  })\n\n  // Async job UI state\n  const [jobStatus, setJobStatus] = useState<string | undefined>(undefined)\n  const [jobProgress, setJobProgress] = useState<number>(0)\n  const [isJobActive, setIsJobActive] = useState<boolean>(false)\n\n  const generateUpload = useCallback(async () => {\n    const doc = getData()\n    const currentInstructionId = instructionIdRef.current\n\n    return fetch(`${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE_UPLOAD}`, {\n      body: JSON.stringify({\n        collectionSlug: collectionSlug ?? '',\n        doc,\n        documentId,\n        locale: localFromContext?.code,\n        options: {\n          instructionId: currentInstructionId,\n        },\n      } satisfies Parameters<GenerateTextarea>[0]),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n      .then(async (uploadResponse) => {\n        if (uploadResponse.ok) {\n          const json = await uploadResponse.json()\n          const { job, result } = json || {}\n          if (result) {\n            setValue(result?.id)\n            setHistory(result?.id)\n\n            // Show toast to prompt user to save\n            toast.success('Image generated successfully! Click Save to see the preview.')\n\n            return uploadResponse\n          }\n\n          // Async job: poll AI Jobs collection for status/progress/result_id\n          if (job && job.id) {\n            setIsJobActive(true)\n            const cancelled = false\n            let attempts = 0\n            const maxAttempts = 600 // up to ~10 minutes @ 1s\n\n            // Basic in-hook state via closure variables; UI will re-render off fetches below\n            const poll = async (): Promise<void> => {\n              if (cancelled) {\n                return\n              }\n              try {\n                const res = await fetch(`${serverURL}${api}/${PLUGIN_AI_JOBS_TABLE}/${job.id}`, {\n                  credentials: 'include',\n                })\n                if (res.ok) {\n                  const jobDoc = await res.json()\n                  const { progress, result_id, status } = jobDoc || {}\n                  setJobStatus(status)\n                  setJobProgress(progress ?? 0)\n                  // When result present, set field and finish\n                  if (status === 'completed' && result_id) {\n                    let valueToSet = result_id\n\n                    // Attempt to fetch full document for immediate preview\n                    if (field && 'relationTo' in field && typeof field.relationTo === 'string') {\n                      let attempts = 0\n                      const maxAttempts = 3\n                      while (attempts < maxAttempts) {\n                        try {\n                          const docRes = await fetch(\n                            `${serverURL}${api}/${field.relationTo}/${result_id}`,\n                            {\n                              credentials: 'include',\n                            },\n                          )\n                          if (docRes.ok) {\n                            const doc = await docRes.json()\n                            // Verify we have a URL for preview\n                            if (doc && doc.url) {\n                              valueToSet = doc\n                              break\n                            }\n                          }\n                        } catch (e) {\n                          console.error('Failed to fetch generated document for preview:', e)\n                        }\n                        attempts++\n                        if (attempts < maxAttempts) {\n                          await new Promise((resolve) => setTimeout(resolve, 500))\n                        }\n                      }\n                    }\n\n                    setValue(valueToSet)\n                    setHistory(result_id)\n                    setIsJobActive(false)\n                    return\n                  }\n                  if (status === 'failed') {\n                    setIsJobActive(false)\n                    throw new Error('Video generation failed')\n                  }\n                }\n              } catch (_) {\n                // silent retry\n              }\n\n              attempts += 1\n              if (!cancelled && attempts < maxAttempts) {\n                setTimeout(poll, 1000)\n              }\n            }\n            setTimeout(poll, 1000)\n            return uploadResponse\n          }\n\n          throw new Error('generateUpload: Unexpected response')\n        } else {\n          const { errors = [] } = await uploadResponse.json()\n          const errStr = errors.map((error: any) => error.message).join(', ')\n          throw new Error(errStr)\n        }\n      })\n      .catch((error) => {\n        toast.error(`Failed to generate: ${error.message}`)\n        console.error(\n          'Error generating or setting your upload, please set it manually if its saved in your media files.',\n          error,\n        )\n      })\n  }, [\n    getData,\n    localFromContext?.code,\n    instructionIdRef,\n    // setValue,\n    documentId,\n    collectionSlug,\n    serverURL,\n    api,\n    setHistory,\n  ])\n\n  return {\n    generateUpload,\n    isJobActive,\n    jobProgress,\n    jobStatus,\n  }\n}\n"],"names":["toast","useConfig","useDocumentInfo","useField","useForm","useLocale","useCallback","useState","PLUGIN_AI_JOBS_TABLE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","useFieldProps","useHistory","useGenerateUpload","instructionIdRef","config","routes","api","serverURL","id","documentId","collectionSlug","localFromContext","getData","set","setHistory","field","path","pathFromContext","setValue","jobStatus","setJobStatus","undefined","jobProgress","setJobProgress","isJobActive","setIsJobActive","generateUpload","doc","currentInstructionId","current","fetch","body","JSON","stringify","locale","code","options","instructionId","credentials","headers","method","then","uploadResponse","ok","json","job","result","success","cancelled","attempts","maxAttempts","poll","res","jobDoc","progress","result_id","status","valueToSet","relationTo","docRes","url","e","console","error","Promise","resolve","setTimeout","Error","_","errors","errStr","map","message","join","catch"],"mappings":"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"}

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":"AAAA;AAEA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAC1D,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEtD,SAASC,WAAW,QAAQ,uBAAsB;AAClD,SAASC,aAAa,QAAQ,oDAAmD;AAEjF,MAAMC,cAAc,CAAC,EAAEF,YAAY,eAAe,CAAC;AASnD,yEAAyE;AACzE,IAAIG,qBAA0C;AAE9C,OAAO,MAAMC,aAAa;IACxB,MAAM,EAAEC,EAAE,EAAE,GAAGV;IACf,MAAM,EAAEW,MAAMC,eAAe,EAAEC,UAAU,EAAE,GAAGP;IAC9C,MAAM,EAAEQ,OAAOC,iBAAiB,EAAE,GAAGd,SAAiB;QACpDU,MAAMC,mBAAmB;IAC3B;IAEA,MAAMI,WAAW,CAAC,EAAEN,GAAG,CAAC,EAAEG,WAAW,CAAC;IAEtC,MAAMI,mBAAmBf,YAAY;QACnC,4BAA4B;QAC5B,IAAIM,oBAAoB;YACtB,OAAOA;QACT;QAEA,IAAI;YACF,IAAI,OAAOU,iBAAiB,aAAa;gBACvC,sBAAsB;gBACtB,MAAMC,SAASD,aAAaE,OAAO,CAACb;gBACpCC,qBAAqBW,SAASE,KAAKC,KAAK,CAACH,UAAU,CAAC;gBACpD,OAAOX;YACT;YACA,OAAO,CAAC;QACV,EAAE,OAAOe,GAAG;YACVC,QAAQC,KAAK,CAAC,0BAA0BF;YACxC,OAAO,CAAC;QACV;IACF,GAAG,EAAE;IAEL,8DAA8D;IAC9D,MAAMG,eAAetB,OAA6C;IAElE,MAAMuB,qBAAqBzB,YAAY,CAAC0B;QACtC,2BAA2B;QAC3BpB,qBAAqBoB;QAErB,IAAI,OAAOV,iBAAiB,aAAa;YACvC;QACF;QAEA,yBAAyB;QACzB,IAAIQ,aAAaG,OAAO,EAAE;YACxBC,aAAaJ,aAAaG,OAAO;QACnC;QAEA,uCAAuC;QACvCH,aAAaG,OAAO,GAAGE,WAAW;YAChC,yEAAyE;YACzE,IAAI,OAAOC,wBAAwB,aAAa;gBAC9CA,oBACE;oBACEd,aAAae,OAAO,CAAC1B,aAAac,KAAKa,SAAS,CAACN;gBACnD,GACA;oBAAEO,SAAS;gBAAK;YAEpB,OAAO;gBACL,oDAAoD;gBACpDjB,aAAae,OAAO,CAAC1B,aAAac,KAAKa,SAAS,CAACN;YACnD;YACAF,aAAaG,OAAO,GAAG;QACzB,GAAG;IACL,GAAG,EAAE;IAEL,uBAAuB;IACvB1B,UAAU;QACR,MAAMiC,sBAAsB,CAACb;YAC3B,IAAIA,EAAEc,GAAG,KAAK9B,eAAegB,EAAEe,QAAQ,EAAE;gBACvC,IAAI;oBACF9B,qBAAqBa,KAAKC,KAAK,CAACC,EAAEe,QAAQ;gBAC5C,EAAE,OAAOC,KAAK;gBACZ,qBAAqB;gBACvB;YACF;QACF;QAEAC,OAAOC,gBAAgB,CAAC,WAAWL;QACnC,OAAO;YACLI,OAAOE,mBAAmB,CAAC,WAAWN;QACxC;IACF,GAAG,EAAE;IAEL,yBAAyB;IACzB,MAAMO,eAAezC,YAAY;QAC/B,MAAM0C,gBAAgB;YAAE,GAAG3B,kBAAkB;QAAC;QAC9C4B,OAAOC,IAAI,CAACF,eAAeG,OAAO,CAAC,CAACC;YAClC,IAAI,CAACA,EAAEC,UAAU,CAACvC,IAAIwC,cAAc,KAAK;gBACvC,OAAON,aAAa,CAACI,EAAE;YACzB;QACF;QACArB,mBAAmBiB;IACrB,GAAG;QAAClC;QAAIM;QAAUC;QAAkBU;KAAmB;IAEvDxB,UAAU;QACR,kFAAkF;QAClFwC;QAEA,MAAMC,gBAAgB3B;QACtB,MAAM,EAAEkC,YAAY,EAAEC,OAAO,EAAE,GAAGR,aAAa,CAAC5B,SAAS,IAAI;YAC3DmC,cAAc,CAAC;YACfC,SAAS,EAAE;QACb;QAEA,IAAIC,WAAWF;QACf,IAAIA,gBAAgB,CAAC,GAAG;YACtBE,WAAW;YACX,IAAItC,mBAAmB;gBACrBqC,OAAO,CAACC,SAAS,GAAGtC;YACtB;QACF;QAEA,MAAMa,mBAAmB;YACvB,GAAGgB,aAAa;YAChB,CAAC5B,SAAS,EAAE;gBAAEmC,cAAcE;gBAAUD;YAAQ;QAChD;QAEAzB,mBAAmBC;IACrB,GAAG;QAACZ;KAAS;IAEb,MAAMsC,MAAMpD,YACV,CAACqD;QACC,MAAMX,gBAAgB3B;QACtB,MAAM,EAAEkC,YAAY,EAAEC,OAAO,EAAE,GAAGR,aAAa,CAAC5B,SAAS,IAAI;YAC3DmC,cAAc,CAAC;YACfC,SAAS,EAAE;QACb;QACA,MAAMI,aAAa;eAAIJ,QAAQK,KAAK,CAAC,GAAGN,eAAe;YAAII;SAAK;QAChE,MAAM3B,mBAAmB;YACvB,GAAGgB,aAAa;YAChB,CAAC5B,SAAS,EAAE;gBAAEmC,cAAcK,WAAWE,MAAM,GAAG;gBAAGN,SAASI;YAAW;QACzE;QACA7B,mBAAmBC;QACnB,OAAO2B;IACT,GACA;QAACvC;QAAUC;QAAkBU;KAAmB;IAGlD,MAAMgC,OAAOzD,YAAY;QACvB,MAAM0C,gBAAgB3B;QACtB,MAAM,EAAEkC,YAAY,EAAEC,OAAO,EAAE,GAAGR,aAAa,CAAC5B,SAAS,IAAI;YAAEmC,cAAc,CAAC;YAAGC,SAAS,EAAE;QAAC;QAC7F,IAAID,eAAe,GAAG;YACpB,MAAME,WAAWF,eAAe;YAChC,MAAMb,WAAWc,OAAO,CAACC,SAAS;YAClC,MAAMzB,mBAAmB;gBACvB,GAAGgB,aAAa;gBAChB,CAAC5B,SAAS,EAAE;oBAAEmC,cAAcE;oBAAUD;gBAAQ;YAChD;YACAzB,mBAAmBC;YACnB,OAAOU;QACT;QACA,OAAOsB;IACT,GAAG;QAAC5C;QAAUC;QAAkBU;KAAmB;IAEnD,MAAMkC,OAAO3D,YAAY;QACvB,MAAM0C,gBAAgB3B;QACtB,MAAM,EAAEkC,YAAY,EAAEC,OAAO,EAAE,GAAGR,aAAa,CAAC5B,SAAS,IAAI;YAAEmC,cAAc,CAAC;YAAGC,SAAS,EAAE;QAAC;QAC7F,IAAID,eAAeC,QAAQM,MAAM,GAAG,GAAG;YACrC,MAAML,WAAWF,eAAe;YAChC,MAAMb,WAAWc,OAAO,CAACC,SAAS;YAClC,MAAMzB,mBAAmB;gBACvB,GAAGgB,aAAa;gBAChB,CAAC5B,SAAS,EAAE;oBAAEmC,cAAcE;oBAAUD;gBAAQ;YAChD;YACAzB,mBAAmBC;YACnB,OAAOU;QACT;QACA,OAAOsB;IACT,GAAG;QAAC5C;QAAUC;QAAkBU;KAAmB;IAEnD,MAAMmC,wBAAwB5D,YAAY;QACxC,MAAM0C,gBAAgB3B;QACtB,OAAO2B,aAAa,CAAC5B,SAAS,IAAI;YAAEmC,cAAc,CAAC;YAAGC,SAAS,EAAE;QAAC;IACpE,GAAG;QAACnC;QAAkBD;KAAS;IAE/B,MAAM+C,eAAeD;IAErB,MAAME,UAAUD,aAAaZ,YAAY,GAAG;IAC5C,MAAMc,UAAUF,aAAaZ,YAAY,GAAGY,aAAaX,OAAO,CAACM,MAAM,GAAG;IAC1E,MAAMQ,eAAeH,aAAaX,OAAO,CAACW,aAAaZ,YAAY,CAAC;IAEpE,OAAO;QACLc;QACAD;QACAE;QACAL;QACAP;QACAK;IACF;AACF,EAAC"}
+{"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/Compose/hooks/useStreamingUpdate.d.ts

@@ -0,0 +1,8 @@
+import type { LexicalEditor } from 'lexical';
+type UseStreamingUpdateParams = {
+    editor: LexicalEditor;
+    isLoading: boolean;
+    object: any;
+};
+export declare const useStreamingUpdate: ({ editor, isLoading, object }: UseStreamingUpdateParams) => void;
+export {};

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

@@ -0,0 +1,48 @@
+import { useForm } from '@payloadcms/ui';
+import { useEffect, useRef } from 'react';
+import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
+import { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js';
+export const useStreamingUpdate = ({ editor, isLoading, object })=>{
+    const { field, path: pathFromContext } = useFieldProps();
+    const { dispatchFields } = useForm();
+    // Ref for latest object to avoid effect re-runs during high-frequency streaming
+    const objectRef = useRef(object);
+    objectRef.current = object;
+    useEffect(()=>{
+        // Only run the animation loop while loading (streaming)
+        if (!isLoading) {
+            return;
+        }
+        let reqId;
+        const loop = ()=>{
+            const currentObject = objectRef.current;
+            if (currentObject) {
+                if (field?.type === 'richText') {
+                    setSafeLexicalState(currentObject, editor);
+                } else if (field && 'name' in field && currentObject[field.name]) {
+                    // Use dispatchFields for high-frequency streaming updates to avoid re-renders
+                    dispatchFields({
+                        type: 'UPDATE',
+                        path: pathFromContext ?? '',
+                        value: currentObject[field.name]
+                    });
+                }
+            }
+            // Continue loop
+            reqId = requestAnimationFrame(loop);
+        };
+        // Start loop
+        loop();
+        return ()=>{
+            cancelAnimationFrame(reqId);
+        };
+    }, [
+        isLoading,
+        editor,
+        field,
+        dispatchFields,
+        pathFromContext
+    ]);
+};
+
+//# sourceMappingURL=useStreamingUpdate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useStreamingUpdate.ts"],"sourcesContent":["import type { LexicalEditor } from 'lexical'\n\nimport { useForm } from '@payloadcms/ui'\nimport { useEffect, useRef } from 'react'\n\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\nimport { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js'\n\ntype UseStreamingUpdateParams = {\n  editor: LexicalEditor\n  isLoading: boolean\n  object: any\n}\n\nexport const useStreamingUpdate = ({ editor, isLoading, object }: UseStreamingUpdateParams) => {\n  const { field, path: pathFromContext } = useFieldProps()\n  const { dispatchFields } = useForm()\n\n  // Ref for latest object to avoid effect re-runs during high-frequency streaming\n  const objectRef = useRef(object)\n  objectRef.current = object\n\n  useEffect(() => {\n    // Only run the animation loop while loading (streaming)\n    if (!isLoading) {\n      return\n    }\n\n    let reqId: number\n\n    const loop = () => {\n      const currentObject = objectRef.current\n\n      if (currentObject) {\n        if (field?.type === 'richText') {\n          setSafeLexicalState(currentObject, editor)\n        } else if (field && 'name' in field && currentObject[field.name]) {\n          // Use dispatchFields for high-frequency streaming updates to avoid re-renders\n          dispatchFields({\n            type: 'UPDATE',\n            path: pathFromContext ?? '',\n            value: currentObject[field.name],\n          } as any)\n        }\n      }\n\n      // Continue loop\n      reqId = requestAnimationFrame(loop)\n    }\n\n    // Start loop\n    loop()\n\n    return () => {\n      cancelAnimationFrame(reqId)\n    }\n  }, [isLoading, editor, field, dispatchFields, pathFromContext])\n}\n"],"names":["useForm","useEffect","useRef","useFieldProps","setSafeLexicalState","useStreamingUpdate","editor","isLoading","object","field","path","pathFromContext","dispatchFields","objectRef","current","reqId","loop","currentObject","type","name","value","requestAnimationFrame","cancelAnimationFrame"],"mappings":"AAEA,SAASA,OAAO,QAAQ,iBAAgB;AACxC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEzC,SAASC,aAAa,QAAQ,oDAAmD;AACjF,SAASC,mBAAmB,QAAQ,4CAA2C;AAQ/E,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAA4B;IACxF,MAAM,EAAEC,KAAK,EAAEC,MAAMC,eAAe,EAAE,GAAGR;IACzC,MAAM,EAAES,cAAc,EAAE,GAAGZ;IAE3B,gFAAgF;IAChF,MAAMa,YAAYX,OAAOM;IACzBK,UAAUC,OAAO,GAAGN;IAEpBP,UAAU;QACR,wDAAwD;QACxD,IAAI,CAACM,WAAW;YACd;QACF;QAEA,IAAIQ;QAEJ,MAAMC,OAAO;YACX,MAAMC,gBAAgBJ,UAAUC,OAAO;YAEvC,IAAIG,eAAe;gBACjB,IAAIR,OAAOS,SAAS,YAAY;oBAC9Bd,oBAAoBa,eAAeX;gBACrC,OAAO,IAAIG,SAAS,UAAUA,SAASQ,aAAa,CAACR,MAAMU,IAAI,CAAC,EAAE;oBAChE,8EAA8E;oBAC9EP,eAAe;wBACbM,MAAM;wBACNR,MAAMC,mBAAmB;wBACzBS,OAAOH,aAAa,CAACR,MAAMU,IAAI,CAAC;oBAClC;gBACF;YACF;YAEA,gBAAgB;YAChBJ,QAAQM,sBAAsBL;QAChC;QAEA,aAAa;QACbA;QAEA,OAAO;YACLM,qBAAqBP;QACvB;IACF,GAAG;QAACR;QAAWD;QAAQG;QAAOG;QAAgBD;KAAgB;AAChE,EAAC"}

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}>

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