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

package/dist/ui/DynamicModelSelect/index.jsx

@@ -1,7 +1,9 @@
 'use client';
 import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
 /**
  * Find a field by name within a block's fields, searching through tabs
  */
@@ -82,26 +84,8 @@ export const DynamicModelSelect = (props) => {
         return providers;
     });
     const { setValue, value } = useField({ path });
-    // State to hold fetched providers data
-    const [providersData, setProvidersData] = useState([]);
-    // Fetch AI Settings global to get configured providers
-    useEffect(() => {
-        const fetchSettings = async () => {
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data && data.providers) {
-                        setProvidersData(data.providers);
-                    }
-                }
-            }
-            catch (error) {
-                console.error('Error fetching AI settings:', error);
-            }
-        };
-        fetchSettings().catch(console.error);
-    }, []);
+    const { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const inferredUseCase = useMemo(() => inferUseCase(path), [path]);
     const options = useMemo(() => {
         if (!providerValue) {
@@ -195,13 +179,6 @@ export const DynamicModelSelect = (props) => {
       <label className="field-label" htmlFor={path}>
         Model
       </label>
-      <SelectInput name={name} onChange={(option) => {
-            if (option && typeof option === 'object' && 'value' in option) {
-                setValue(option.value);
-            }
-            else {
-                setValue(option);
-            }
-        }} options={options} path={path} value={value}/>
+      <SelectInput name={name} onChange={(option) => handleSelectChange(setValue, option)} options={options} path={path} value={value}/>
     </div>);
 };

package/dist/ui/DynamicProviderSelect/index.js

@@ -1,32 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectInput, useField } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
 export const DynamicProviderSelect = (props)=>{
     const { name, path } = props;
     const { setValue, value } = useField({
         path
     });
-    // State to hold fetched providers data
-    const [providersData, setProvidersData] = useState([]);
-    // Fetch AI Settings global to get configured providers
-    useEffect(()=>{
-        const fetchSettings = async ()=>{
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data && data.providers) {
-                        setProvidersData(data.providers);
-                    }
-                }
-            } catch (error) {
-                console.error('Error fetching AI settings:', error);
-            }
-        };
-        void fetchSettings();
-    }, []);
+    const { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const options = useMemo(()=>{
         const optionsList = [];
         const processedProviders = new Set();
@@ -83,13 +68,7 @@ export const DynamicProviderSelect = (props)=>{
             }),
             /*#__PURE__*/ _jsx(SelectInput, {
                 name: name,
-                onChange: (option)=>{
-                    if (option && typeof option === 'object' && 'value' in option) {
-                        setValue(option.value);
-                    } else {
-                        setValue(option);
-                    }
-                },
+                onChange: (option)=>handleSelectChange(setValue, option),
                 options: options,
                 path: path,
                 value: value

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/DynamicProviderSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\n\ntype Props = {\n  name: string\n  path: string\n}\n\nexport const DynamicProviderSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  const { setValue, value } = useField<string>({ path })\n\n  // State to hold fetched providers data\n  const [providersData, setProvidersData] = useState<any[]>([])\n\n  // Fetch AI Settings global to get configured providers\n  useEffect(() => {\n    const fetchSettings = async () => {\n      try {\n        const response = await fetch('/api/globals/ai-providers?depth=1')\n        if (response.ok) {\n          const data = await response.json()\n          if (data && data.providers) {\n            setProvidersData(data.providers)\n          }\n        }\n      } catch (error) {\n        console.error('Error fetching AI settings:', error)\n      }\n    }\n\n    void fetchSettings()\n  }, [])\n\n  const options = useMemo(() => {\n    const optionsList: { label: string; value: string }[] = []\n    const processedProviders = new Set<string>()\n\n    // Iterate through fetched providers to find custom names\n    providersData.forEach((provider: any) => {\n      if (!provider.enabled) {\n        return\n      }\n\n      const blockType = provider.blockType\n      const customName = provider.providerName\n\n      // Get static label as fallback\n      const staticBlock = allProviderBlocks.find((b) => b.slug === blockType)\n      const staticLabel = staticBlock?.labels?.singular\n        ? typeof staticBlock.labels.singular === 'string'\n          ? staticBlock.labels.singular\n          : blockType\n        : blockType\n\n      const label = customName || staticLabel\n\n      if (!processedProviders.has(blockType)) {\n        optionsList.push({\n          label,\n          value: blockType,\n        })\n        processedProviders.add(blockType)\n      } else if (customName) {\n        // Update existing label if custom name is available\n        const existingOpt = optionsList.find((o) => o.value === blockType)\n        if (existingOpt && existingOpt.label === staticLabel) {\n          existingOpt.label = customName\n        }\n      }\n    })\n\n    // Add any other available providers from blocks that might not be configured yet?\n    // Usually we only want to show configured providers in the selection list.\n    // But for standard providers (OpenAI, Google), they might not need much config other than API key.\n    // If they are not in the list, user can't select them.\n    // However, if they are not enabled in settings, maybe we shouldn't show them?\n    // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.\n\n    allProviderBlocks.forEach((block) => {\n      if (!processedProviders.has(block.slug)) {\n        optionsList.push({\n          label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,\n          value: block.slug,\n        })\n      }\n    })\n\n    return optionsList\n  }, [providersData])\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Provider\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={options as any}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","useField","React","useEffect","useMemo","useState","allProviderBlocks","DynamicProviderSelect","props","name","path","setValue","value","providersData","setProvidersData","fetchSettings","response","fetch","ok","data","json","providers","error","console","options","optionsList","processedProviders","Set","forEach","provider","enabled","blockType","customName","providerName","staticBlock","find","b","slug","staticLabel","labels","singular","label","has","push","add","existingOpt","o","block","div","className","htmlFor","onChange","option"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/DynamicProviderSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\nimport { useAISettings } from '../hooks/useAISettings.js'\nimport { handleSelectChange } from '../shared/handleSelectChange.js'\n\ntype Props = {\n  name: string\n  path: string\n}\n\nexport const DynamicProviderSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  const { setValue, value } = useField<string>({ path })\n\n  const { data: aiSettings } = useAISettings()\n  const providersData = aiSettings?.providers ?? []\n\n  const options = useMemo(() => {\n    const optionsList: { label: string; value: string }[] = []\n    const processedProviders = new Set<string>()\n\n    // Iterate through fetched providers to find custom names\n    providersData.forEach((provider: any) => {\n      if (!provider.enabled) {\n        return\n      }\n\n      const blockType = provider.blockType\n      const customName = provider.providerName\n\n      // Get static label as fallback\n      const staticBlock = allProviderBlocks.find((b) => b.slug === blockType)\n      const staticLabel = staticBlock?.labels?.singular\n        ? typeof staticBlock.labels.singular === 'string'\n          ? staticBlock.labels.singular\n          : blockType\n        : blockType\n\n      const label = customName || staticLabel\n\n      if (!processedProviders.has(blockType)) {\n        optionsList.push({\n          label,\n          value: blockType,\n        })\n        processedProviders.add(blockType)\n      } else if (customName) {\n        // Update existing label if custom name is available\n        const existingOpt = optionsList.find((o) => o.value === blockType)\n        if (existingOpt && existingOpt.label === staticLabel) {\n          existingOpt.label = customName\n        }\n      }\n    })\n\n    // Add any other available providers from blocks that might not be configured yet?\n    // Usually we only want to show configured providers in the selection list.\n    // But for standard providers (OpenAI, Google), they might not need much config other than API key.\n    // If they are not in the list, user can't select them.\n    // However, if they are not enabled in settings, maybe we shouldn't show them?\n    // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.\n\n    allProviderBlocks.forEach((block) => {\n      if (!processedProviders.has(block.slug)) {\n        optionsList.push({\n          label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,\n          value: block.slug,\n        })\n      }\n    })\n\n    return optionsList\n  }, [providersData])\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Provider\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => handleSelectChange(setValue, option)}\n        options={options as any}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","useField","React","useMemo","allProviderBlocks","useAISettings","handleSelectChange","DynamicProviderSelect","props","name","path","setValue","value","data","aiSettings","providersData","providers","options","optionsList","processedProviders","Set","forEach","provider","enabled","blockType","customName","providerName","staticBlock","find","b","slug","staticLabel","labels","singular","label","has","push","add","existingOpt","o","block","div","className","htmlFor","onChange","option"],"mappings":"AAAA;;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,iBAAgB;AACtD,OAAOC,SAASC,OAAO,QAAQ,QAAO;AAEtC,SAASC,iBAAiB,QAAQ,qCAAoC;AACtE,SAASC,aAAa,QAAQ,4BAA2B;AACzD,SAASC,kBAAkB,QAAQ,kCAAiC;AAOpE,OAAO,MAAMC,wBAAyC,CAACC;IACrD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGF;IAEvB,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGX,SAAiB;QAAES;IAAK;IAEpD,MAAM,EAAEG,MAAMC,UAAU,EAAE,GAAGT;IAC7B,MAAMU,gBAAgBD,YAAYE,aAAa,EAAE;IAEjD,MAAMC,UAAUd,QAAQ;QACtB,MAAMe,cAAkD,EAAE;QAC1D,MAAMC,qBAAqB,IAAIC;QAE/B,yDAAyD;QACzDL,cAAcM,OAAO,CAAC,CAACC;YACrB,IAAI,CAACA,SAASC,OAAO,EAAE;gBACrB;YACF;YAEA,MAAMC,YAAYF,SAASE,SAAS;YACpC,MAAMC,aAAaH,SAASI,YAAY;YAExC,+BAA+B;YAC/B,MAAMC,cAAcvB,kBAAkBwB,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAKN;YAC7D,MAAMO,cAAcJ,aAAaK,QAAQC,WACrC,OAAON,YAAYK,MAAM,CAACC,QAAQ,KAAK,WACrCN,YAAYK,MAAM,CAACC,QAAQ,GAC3BT,YACFA;YAEJ,MAAMU,QAAQT,cAAcM;YAE5B,IAAI,CAACZ,mBAAmBgB,GAAG,CAACX,YAAY;gBACtCN,YAAYkB,IAAI,CAAC;oBACfF;oBACAtB,OAAOY;gBACT;gBACAL,mBAAmBkB,GAAG,CAACb;YACzB,OAAO,IAAIC,YAAY;gBACrB,oDAAoD;gBACpD,MAAMa,cAAcpB,YAAYU,IAAI,CAAC,CAACW,IAAMA,EAAE3B,KAAK,KAAKY;gBACxD,IAAIc,eAAeA,YAAYJ,KAAK,KAAKH,aAAa;oBACpDO,YAAYJ,KAAK,GAAGT;gBACtB;YACF;QACF;QAEA,kFAAkF;QAClF,2EAA2E;QAC3E,mGAAmG;QACnG,uDAAuD;QACvD,8EAA8E;QAC9E,mGAAmG;QAEnGrB,kBAAkBiB,OAAO,CAAC,CAACmB;YACzB,IAAI,CAACrB,mBAAmBgB,GAAG,CAACK,MAAMV,IAAI,GAAG;gBACvCZ,YAAYkB,IAAI,CAAC;oBACfF,OAAO,OAAOM,MAAMR,MAAM,EAAEC,aAAa,WAAWO,MAAMR,MAAM,CAACC,QAAQ,GAAGO,MAAMV,IAAI;oBACtFlB,OAAO4B,MAAMV,IAAI;gBACnB;YACF;QACF;QAEA,OAAOZ;IACT,GAAG;QAACH;KAAc;IAElB,qBACE,MAAC0B;QAAIC,WAAU;;0BACb,KAACR;gBAAMQ,WAAU;gBAAcC,SAASjC;0BAAM;;0BAG9C,KAACV;gBACCS,MAAMA;gBACNmC,UAAU,CAACC,SAAWvC,mBAAmBK,UAAUkC;gBACnD5B,SAASA;gBACTP,MAAMA;gBACNE,OAAOA;;;;AAIf,EAAC"}

package/dist/ui/DynamicProviderSelect/index.jsx

@@ -1,30 +1,14 @@
 'use client';
 import { SelectInput, useField } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
 export const DynamicProviderSelect = (props) => {
     const { name, path } = props;
     const { setValue, value } = useField({ path });
-    // State to hold fetched providers data
-    const [providersData, setProvidersData] = useState([]);
-    // Fetch AI Settings global to get configured providers
-    useEffect(() => {
-        const fetchSettings = async () => {
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data && data.providers) {
-                        setProvidersData(data.providers);
-                    }
-                }
-            }
-            catch (error) {
-                console.error('Error fetching AI settings:', error);
-            }
-        };
-        void fetchSettings();
-    }, []);
+    const { data: aiSettings } = useAISettings();
+    const providersData = aiSettings?.providers ?? [];
     const options = useMemo(() => {
         const optionsList = [];
         const processedProviders = new Set();
@@ -78,13 +62,6 @@ export const DynamicProviderSelect = (props) => {
       <label className="field-label" htmlFor={path}>
         Provider
       </label>
-      <SelectInput name={name} onChange={(option) => {
-            if (option && typeof option === 'object' && 'value' in option) {
-                setValue(option.value);
-            }
-            else {
-                setValue(option);
-            }
-        }} options={options} path={path} value={value}/>
+      <SelectInput name={name} onChange={(option) => handleSelectChange(setValue, option)} options={options} path={path} value={value}/>
     </div>);
 };

package/dist/ui/DynamicVoiceSelect/index.js

@@ -1,7 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+const StatusMessage = ({ label, message, path })=>/*#__PURE__*/ _jsxs("div", {
+        className: "field-type text",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: path,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    color: 'var(--theme-elevation-600)',
+                    fontSize: '13px'
+                },
+                children: message
+            })
+        ]
+    });
 export const DynamicVoiceSelect = (props)=>{
     const { name, path } = props;
     // Get provider from siblings
@@ -13,29 +32,7 @@ export const DynamicVoiceSelect = (props)=>{
     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(()=>{
-        const fetchSettings = async ()=>{
-            setIsLoading(true);
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    setAiSettings(data);
-                }
-            } catch (err) {
-                console.error('Error fetching AI settings:', err);
-            } finally{
-                setIsLoading(false);
-            }
-        };
-        void fetchSettings();
-    }, [
-        provider
-    ]) // Re-fetch when provider changes to ensure we have the latest voices
-    ;
+    const { data: aiSettings, isLoading } = useAISettings();
     const voices = useMemo(()=>{
         if (!provider || !aiSettings?.providers) {
             return [];
@@ -68,64 +65,24 @@ export const DynamicVoiceSelect = (props)=>{
         setValue
     ]);
     if (!provider) {
-        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: "Please select a provider first."
-                })
-            ]
+        return /*#__PURE__*/ _jsx(StatusMessage, {
+            label: "Voice",
+            message: "Please select a provider first.",
+            path: path
         });
     }
     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..."
-                })
-            ]
+        return /*#__PURE__*/ _jsx(StatusMessage, {
+            label: "Voice",
+            message: "Loading voices...",
+            path: path
         });
     }
     if (voices.length === 0) {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "field-type text",
-            children: [
-                /*#__PURE__*/ _jsx("label", {
-                    className: "field-label",
-                    htmlFor: path,
-                    children: "Voice"
-                }),
-                /*#__PURE__*/ _jsxs("p", {
-                    style: {
-                        color: 'var(--theme-elevation-600)',
-                        fontSize: '13px'
-                    },
-                    children: [
-                        "No voices available. Please configure voices in AI Settings for ",
-                        provider,
-                        "."
-                    ]
-                })
-            ]
+        return /*#__PURE__*/ _jsx(StatusMessage, {
+            label: "Voice",
+            message: `No voices available. Please configure voices in AI Settings for ${provider}.`,
+            path: path
         });
     }
     return /*#__PURE__*/ _jsxs("div", {
@@ -138,13 +95,7 @@ export const DynamicVoiceSelect = (props)=>{
             }),
             /*#__PURE__*/ _jsx(SelectInput, {
                 name: name,
-                onChange: (option)=>{
-                    if (option && typeof option === 'object' && 'value' in option) {
-                        setValue(option.value);
-                    } else {
-                        setValue(option);
-                    }
-                },
+                onChange: (option)=>handleSelectChange(setValue, option),
                 options: voices,
                 path: path,
                 value: value

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\ninterface Voice {\n  category?: string\n  enabled?: boolean\n  id: string\n  labels?: Record<string, unknown>\n  name: string\n  preview_url?: string\n}\n\ninterface ProviderBlock {\n  blockType: string\n  enabled?: boolean\n  voices?: Voice[]\n}\n\nexport const DynamicVoiceSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  // Get provider from siblings\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  const providerPath = `${parentPath}.provider`\n\n  // Use useFormFields to get the provider field value - this will re-render when provider changes\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const provider = (providerField?.value as string) || ''\n\n  const { setValue, value } = useField<string>({ path })\n  const [aiSettings, setAiSettings] = useState<{ providers?: ProviderBlock[] } | null>(null)\n  const [isLoading, setIsLoading] = useState(true)\n\n  // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices\n  useEffect(() => {\n    const fetchSettings = async () => {\n      setIsLoading(true)\n      try {\n        const response = await fetch('/api/globals/ai-providers?depth=1')\n        if (response.ok) {\n          const data = await response.json()\n          setAiSettings(data)\n        }\n      } catch (err) {\n        console.error('Error fetching AI settings:', err)\n      } finally {\n        setIsLoading(false)\n      }\n    }\n\n    void fetchSettings()\n  }, [provider]) // Re-fetch when provider changes to ensure we have the latest voices\n\n  const voices = useMemo(() => {\n    if (!provider || !aiSettings?.providers) {\n      return []\n    }\n\n    // Find the provider block matching the selected provider\n    const providerBlock = aiSettings.providers.find(\n      (p: ProviderBlock) => p.blockType === provider && p.enabled !== false,\n    )\n\n    if (!providerBlock?.voices) {\n      return []\n    }\n\n    // Get enabled voices from provider block\n    return providerBlock.voices\n      .filter((v: Voice) => v.enabled !== false)\n      .map((v: Voice) => ({\n        label: v.name || v.id,\n        value: v.id,\n      }))\n  }, [provider, aiSettings])\n\n  // Clear voice selection when provider changes and current voice is not available\n  useEffect(() => {\n    if (value && voices.length > 0) {\n      const voiceExists = voices.some((v) => v.value === value)\n      if (!voiceExists) {\n        setValue('')\n      }\n    }\n  }, [voices, value, setValue])\n\n  if (!provider) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          Please select a provider first.\n        </p>\n      </div>\n    )\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>Loading voices...</p>\n      </div>\n    )\n  }\n\n  if (voices.length === 0) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          No voices available. Please configure voices in AI Settings for {provider}.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Voice\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value as string)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={voices}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n\n"],"names":["SelectInput","useField","useFormFields","React","useEffect","useMemo","useState","DynamicVoiceSelect","props","name","path","parentPath","split","slice","join","providerPath","providerField","fields","provider","value","setValue","aiSettings","setAiSettings","isLoading","setIsLoading","fetchSettings","response","fetch","ok","data","json","err","console","error","voices","providers","providerBlock","find","p","blockType","enabled","filter","v","map","label","id","length","voiceExists","some","div","className","htmlFor","style","color","fontSize","onChange","option","options"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/DynamicVoiceSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useEffect, useMemo } from 'react'\n\nimport type { Voice } from '../shared/types.js'\n\nimport { useAISettings } from '../hooks/useAISettings.js'\nimport { handleSelectChange } from '../shared/handleSelectChange.js'\n\ntype Props = {\n  name: string\n  path: string\n}\n\ninterface ProviderBlock {\n  blockType: string\n  enabled?: boolean\n  voices?: Voice[]\n}\n\nconst StatusMessage: React.FC<{ label: string; message: string; path: string }> = ({ label, message, path }) => (\n  <div className=\"field-type text\">\n    <label className=\"field-label\" htmlFor={path}>\n      {label}\n    </label>\n    <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n      {message}\n    </p>\n  </div>\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 { data: aiSettings, isLoading } = useAISettings()\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    ) as ProviderBlock | undefined\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 <StatusMessage label=\"Voice\" message=\"Please select a provider first.\" path={path} />\n  }\n\n  if (isLoading) {\n    return <StatusMessage label=\"Voice\" message=\"Loading voices...\" path={path} />\n  }\n\n  if (voices.length === 0) {\n    return (\n      <StatusMessage\n        label=\"Voice\"\n        message={`No voices available. Please configure voices in AI Settings for ${provider}.`}\n        path={path}\n      />\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) => handleSelectChange(setValue, option)}\n        options={voices}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n\n"],"names":["SelectInput","useField","useFormFields","React","useEffect","useMemo","useAISettings","handleSelectChange","StatusMessage","label","message","path","div","className","htmlFor","p","style","color","fontSize","DynamicVoiceSelect","props","name","parentPath","split","slice","join","providerPath","providerField","fields","provider","value","setValue","data","aiSettings","isLoading","voices","providers","providerBlock","find","blockType","enabled","filter","v","map","id","length","voiceExists","some","onChange","option","options"],"mappings":"AAAA;;AAEA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACrE,OAAOC,SAASC,SAAS,EAAEC,OAAO,QAAQ,QAAO;AAIjD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,SAASC,kBAAkB,QAAQ,kCAAiC;AAapE,MAAMC,gBAA4E,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAE,iBACzG,MAACC;QAAIC,WAAU;;0BACb,KAACJ;gBAAMI,WAAU;gBAAcC,SAASH;0BACrCF;;0BAEH,KAACM;gBAAEC,OAAO;oBAAEC,OAAO;oBAA8BC,UAAU;gBAAO;0BAC/DR;;;;AAKP,OAAO,MAAMS,qBAAsC,CAACC;IAClD,MAAM,EAAEC,IAAI,EAAEV,IAAI,EAAE,GAAGS;IAEvB,6BAA6B;IAC7B,MAAME,aAAaX,KAAKY,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACrD,MAAMC,eAAe,CAAC,EAAEJ,WAAW,SAAS,CAAC;IAE7C,gGAAgG;IAChG,MAAMK,gBAAgBzB,cAAc,CAAC,CAAC0B,OAAO,GAAKA,MAAM,CAACF,aAAa;IACtE,MAAMG,WAAW,AAACF,eAAeG,SAAoB;IAErD,MAAM,EAAEC,QAAQ,EAAED,KAAK,EAAE,GAAG7B,SAAiB;QAAEU;IAAK;IACpD,MAAM,EAAEqB,MAAMC,UAAU,EAAEC,SAAS,EAAE,GAAG5B;IAExC,MAAM6B,SAAS9B,QAAQ;QACrB,IAAI,CAACwB,YAAY,CAACI,YAAYG,WAAW;YACvC,OAAO,EAAE;QACX;QAEA,yDAAyD;QACzD,MAAMC,gBAAgBJ,WAAWG,SAAS,CAACE,IAAI,CAC7C,CAACvB,IAAqBA,EAAEwB,SAAS,KAAKV,YAAYd,EAAEyB,OAAO,KAAK;QAGlE,IAAI,CAACH,eAAeF,QAAQ;YAC1B,OAAO,EAAE;QACX;QAEA,yCAAyC;QACzC,OAAOE,cAAcF,MAAM,CACxBM,MAAM,CAAC,CAACC,IAAaA,EAAEF,OAAO,KAAK,OACnCG,GAAG,CAAC,CAACD,IAAc,CAAA;gBAClBjC,OAAOiC,EAAErB,IAAI,IAAIqB,EAAEE,EAAE;gBACrBd,OAAOY,EAAEE,EAAE;YACb,CAAA;IACJ,GAAG;QAACf;QAAUI;KAAW;IAEzB,iFAAiF;IACjF7B,UAAU;QACR,IAAI0B,SAASK,OAAOU,MAAM,GAAG,GAAG;YAC9B,MAAMC,cAAcX,OAAOY,IAAI,CAAC,CAACL,IAAMA,EAAEZ,KAAK,KAAKA;YACnD,IAAI,CAACgB,aAAa;gBAChBf,SAAS;YACX;QACF;IACF,GAAG;QAACI;QAAQL;QAAOC;KAAS;IAE5B,IAAI,CAACF,UAAU;QACb,qBAAO,KAACrB;YAAcC,OAAM;YAAQC,SAAQ;YAAkCC,MAAMA;;IACtF;IAEA,IAAIuB,WAAW;QACb,qBAAO,KAAC1B;YAAcC,OAAM;YAAQC,SAAQ;YAAoBC,MAAMA;;IACxE;IAEA,IAAIwB,OAAOU,MAAM,KAAK,GAAG;QACvB,qBACE,KAACrC;YACCC,OAAM;YACNC,SAAS,CAAC,gEAAgE,EAAEmB,SAAS,CAAC,CAAC;YACvFlB,MAAMA;;IAGZ;IAEA,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACJ;gBAAMI,WAAU;gBAAcC,SAASH;0BAAM;;0BAG9C,KAACX;gBACCqB,MAAMA;gBACN2B,UAAU,CAACC,SAAW1C,mBAAmBwB,UAAUkB;gBACnDC,SAASf;gBACTxB,MAAMA;gBACNmB,OAAOA;;;;AAIf,EAAC"}

package/dist/ui/DynamicVoiceSelect/index.jsx

@@ -1,6 +1,16 @@
 'use client';
 import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+const StatusMessage = ({ label, message, path }) => (<div className="field-type text">
+    <label className="field-label" htmlFor={path}>
+      {label}
+    </label>
+    <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
+      {message}
+    </p>
+  </div>);
 export const DynamicVoiceSelect = (props) => {
     const { name, path } = props;
     // Get provider from siblings
@@ -10,28 +20,7 @@ export const DynamicVoiceSelect = (props) => {
     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(() => {
-        const fetchSettings = async () => {
-            setIsLoading(true);
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    setAiSettings(data);
-                }
-            }
-            catch (err) {
-                console.error('Error fetching AI settings:', err);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        void fetchSettings();
-    }, [provider]); // Re-fetch when provider changes to ensure we have the latest voices
+    const { data: aiSettings, isLoading } = useAISettings();
     const voices = useMemo(() => {
         if (!provider || !aiSettings?.providers) {
             return [];
@@ -59,44 +48,18 @@ export const DynamicVoiceSelect = (props) => {
         }
     }, [voices, value, setValue]);
     if (!provider) {
-        return (<div className="field-type text">
-        <label className="field-label" htmlFor={path}>
-          Voice
-        </label>
-        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
-          Please select a provider first.
-        </p>
-      </div>);
+        return <StatusMessage label="Voice" message="Please select a provider first." path={path}/>;
     }
     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>);
+        return <StatusMessage label="Voice" message="Loading voices..." path={path}/>;
     }
     if (voices.length === 0) {
-        return (<div className="field-type text">
-        <label className="field-label" htmlFor={path}>
-          Voice
-        </label>
-        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
-          No voices available. Please configure voices in AI Settings for {provider}.
-        </p>
-      </div>);
+        return (<StatusMessage label="Voice" message={`No voices available. Please configure voices in AI Settings for ${provider}.`} path={path}/>);
     }
     return (<div className="field-type select">
       <label className="field-label" htmlFor={path}>
         Voice
       </label>
-      <SelectInput name={name} onChange={(option) => {
-            if (option && typeof option === 'object' && 'value' in option) {
-                setValue(option.value);
-            }
-            else {
-                setValue(option);
-            }
-        }} options={voices} path={path} value={value}/>
+      <SelectInput name={name} onChange={(option) => handleSelectChange(setValue, option)} options={voices} path={path} value={value}/>
     </div>);
 };

package/dist/ui/GlobalProviderOptions/index.d.ts

@@ -0,0 +1,2 @@
+import type { FieldClientComponent } from 'payload';
+export declare const GlobalProviderOptions: FieldClientComponent;

package/dist/ui/GlobalProviderOptions/index.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useFormFields } from '@payloadcms/ui';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { ProviderOptionsTree } from '../InstructionProviderOptions/ProviderOptionsTree.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+export const GlobalProviderOptions = ({ path })=>{
+    const fieldPath = String(path || '');
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const schemaPath = `${groupPath}.schema`;
+    const providerField = useFormFields(([fields])=>fields[providerPath]);
+    const schemaField = useFormFields(([fields])=>fields[schemaPath]);
+    const provider = typeof providerField?.value === 'string' ? providerField.value : undefined;
+    const schemaByProvider = isRecord(schemaField?.value) ? schemaField.value : {};
+    const schema = provider && isRecord(schemaByProvider[provider]) ? schemaByProvider[provider] : null;
+    const { setValue: setProviderOptionsValue, value: providerOptionsValue } = useField({
+        path: fieldPath
+    });
+    const handleOptionChange = useCallback((keyPath, targetValue)=>{
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValue,
+            keyPath,
+            provider,
+            targetValue
+        });
+        setProviderOptionsValue(nextValue);
+    }, [
+        provider,
+        providerOptionsValue,
+        setProviderOptionsValue
+    ]);
+    if (!provider) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type",
+            style: {
+                marginTop: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    children: "Provider Options"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        margin: 0
+                    },
+                    children: "Select a provider to configure provider options."
+                })
+            ]
+        });
+    }
+    if (!schema || Object.keys(schema).length === 0) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type",
+            style: {
+                marginTop: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    children: "Provider Options"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        margin: 0
+                    },
+                    children: "No provider options schema exists for this provider and capability."
+                })
+            ]
+        });
+    }
+    const selectedProviderValues = isRecord(providerOptionsValue) && isRecord(providerOptionsValue[provider]) ? providerOptionsValue[provider] : {};
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type",
+        style: {
+            marginTop: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "field-label",
+                children: "Provider Options"
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                style: {
+                    color: 'var(--theme-elevation-500)',
+                    marginBottom: '0.75rem',
+                    marginTop: 0
+                },
+                children: [
+                    "Configure default provider options for ",
+                    provider,
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column'
+                },
+                children: /*#__PURE__*/ _jsx(ProviderOptionsTree, {
+                    onChange: handleOptionChange,
+                    path: [],
+                    schemaValue: schema,
+                    selectedValue: selectedProviderValues
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/GlobalProviderOptions/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldClientComponent } from 'payload'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useCallback } from 'react'\n\nimport { ProviderOptionsTree } from '../InstructionProviderOptions/ProviderOptionsTree.js'\nimport { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js'\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return !!value && typeof value === 'object' && !Array.isArray(value)\n}\n\nexport const GlobalProviderOptions: FieldClientComponent = ({ path }) => {\n  const fieldPath = String(path || '')\n  const groupPath = fieldPath.split('.').slice(0, -1).join('.')\n  const providerPath = `${groupPath}.provider`\n  const schemaPath = `${groupPath}.schema`\n\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const schemaField = useFormFields(([fields]) => fields[schemaPath])\n  const provider = typeof providerField?.value === 'string' ? providerField.value : undefined\n\n  const schemaByProvider = isRecord(schemaField?.value) ? schemaField.value : {}\n  const schema = provider && isRecord(schemaByProvider[provider]) ? schemaByProvider[provider] : null\n\n  const { setValue: setProviderOptionsValue, value: providerOptionsValue } = useField<unknown>({\n    path: fieldPath,\n  })\n\n  const handleOptionChange = useCallback(\n    (keyPath: string[], targetValue: unknown) => {\n      const nextValue = updateProviderOptionsValue({\n        currentValue: providerOptionsValue,\n        keyPath,\n        provider,\n        targetValue,\n      })\n      setProviderOptionsValue(nextValue)\n    },\n    [provider, providerOptionsValue, setProviderOptionsValue],\n  )\n\n  if (!provider) {\n    return (\n      <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n        <div className=\"field-label\">Provider Options</div>\n        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>\n          Select a provider to configure provider options.\n        </p>\n      </div>\n    )\n  }\n\n  if (!schema || Object.keys(schema).length === 0) {\n    return (\n      <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n        <div className=\"field-label\">Provider Options</div>\n        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>\n          No provider options schema exists for this provider and capability.\n        </p>\n      </div>\n    )\n  }\n\n  const selectedProviderValues =\n    isRecord(providerOptionsValue) && isRecord(providerOptionsValue[provider])\n      ? providerOptionsValue[provider]\n      : {}\n\n  return (\n    <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n      <div className=\"field-label\">Provider Options</div>\n      <p style={{ color: 'var(--theme-elevation-500)', marginBottom: '0.75rem', marginTop: 0 }}>\n        Configure default provider options for {provider}.\n      </p>\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <ProviderOptionsTree\n          onChange={handleOptionChange}\n          path={[]}\n          schemaValue={schema}\n          selectedValue={selectedProviderValues}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useFormFields","React","useCallback","ProviderOptionsTree","updateProviderOptionsValue","isRecord","value","Array","isArray","GlobalProviderOptions","path","fieldPath","String","groupPath","split","slice","join","providerPath","schemaPath","providerField","fields","schemaField","provider","undefined","schemaByProvider","schema","setValue","setProviderOptionsValue","providerOptionsValue","handleOptionChange","keyPath","targetValue","nextValue","currentValue","div","className","style","marginTop","p","color","margin","Object","keys","length","selectedProviderValues","marginBottom","display","flexDirection","onChange","schemaValue","selectedValue"],"mappings":"AAAA;;AAIA,SAASA,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACxD,YAAYC,WAAW,QAAO;AAC9B,SAASC,WAAW,QAAQ,QAAO;AAEnC,SAASC,mBAAmB,QAAQ,uDAAsD;AAC1F,SAASC,0BAA0B,QAAQ,mDAAkD;AAE7F,SAASC,SAASC,KAAc;IAC9B,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,CAACC,MAAMC,OAAO,CAACF;AAChE;AAEA,OAAO,MAAMG,wBAA8C,CAAC,EAAEC,IAAI,EAAE;IAClE,MAAMC,YAAYC,OAAOF,QAAQ;IACjC,MAAMG,YAAYF,UAAUG,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACzD,MAAMC,eAAe,CAAC,EAAEJ,UAAU,SAAS,CAAC;IAC5C,MAAMK,aAAa,CAAC,EAAEL,UAAU,OAAO,CAAC;IAExC,MAAMM,gBAAgBnB,cAAc,CAAC,CAACoB,OAAO,GAAKA,MAAM,CAACH,aAAa;IACtE,MAAMI,cAAcrB,cAAc,CAAC,CAACoB,OAAO,GAAKA,MAAM,CAACF,WAAW;IAClE,MAAMI,WAAW,OAAOH,eAAeb,UAAU,WAAWa,cAAcb,KAAK,GAAGiB;IAElF,MAAMC,mBAAmBnB,SAASgB,aAAaf,SAASe,YAAYf,KAAK,GAAG,CAAC;IAC7E,MAAMmB,SAASH,YAAYjB,SAASmB,gBAAgB,CAACF,SAAS,IAAIE,gBAAgB,CAACF,SAAS,GAAG;IAE/F,MAAM,EAAEI,UAAUC,uBAAuB,EAAErB,OAAOsB,oBAAoB,EAAE,GAAG7B,SAAkB;QAC3FW,MAAMC;IACR;IAEA,MAAMkB,qBAAqB3B,YACzB,CAAC4B,SAAmBC;QAClB,MAAMC,YAAY5B,2BAA2B;YAC3C6B,cAAcL;YACdE;YACAR;YACAS;QACF;QACAJ,wBAAwBK;IAC1B,GACA;QAACV;QAAUM;QAAsBD;KAAwB;IAG3D,IAAI,CAACL,UAAU;QACb,qBACE,MAACY;YAAIC,WAAU;YAAaC,OAAO;gBAAEC,WAAW;YAAO;;8BACrD,KAACH;oBAAIC,WAAU;8BAAc;;8BAC7B,KAACG;oBAAEF,OAAO;wBAAEG,OAAO;wBAA8BC,QAAQ;oBAAE;8BAAG;;;;IAKpE;IAEA,IAAI,CAACf,UAAUgB,OAAOC,IAAI,CAACjB,QAAQkB,MAAM,KAAK,GAAG;QAC/C,qBACE,MAACT;YAAIC,WAAU;YAAaC,OAAO;gBAAEC,WAAW;YAAO;;8BACrD,KAACH;oBAAIC,WAAU;8BAAc;;8BAC7B,KAACG;oBAAEF,OAAO;wBAAEG,OAAO;wBAA8BC,QAAQ;oBAAE;8BAAG;;;;IAKpE;IAEA,MAAMI,yBACJvC,SAASuB,yBAAyBvB,SAASuB,oBAAoB,CAACN,SAAS,IACrEM,oBAAoB,CAACN,SAAS,GAC9B,CAAC;IAEP,qBACE,MAACY;QAAIC,WAAU;QAAaC,OAAO;YAAEC,WAAW;QAAO;;0BACrD,KAACH;gBAAIC,WAAU;0BAAc;;0BAC7B,MAACG;gBAAEF,OAAO;oBAAEG,OAAO;oBAA8BM,cAAc;oBAAWR,WAAW;gBAAE;;oBAAG;oBAChDf;oBAAS;;;0BAEnD,KAACY;gBAAIE,OAAO;oBAAEU,SAAS;oBAAQC,eAAe;gBAAS;0BACrD,cAAA,KAAC5C;oBACC6C,UAAUnB;oBACVnB,MAAM,EAAE;oBACRuC,aAAaxB;oBACbyB,eAAeN;;;;;AAKzB,EAAC"}