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

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput } from '@payloadcms/ui';
+import React from 'react';
+export const ProviderOptionsTree = ({ disabled, onChange, path, schemaValue, selectedValue })=>{
+    const nodeKey = path.length > 0 ? path[path.length - 1] : 'root';
+    const inputId = `po-${path.join('-')}`;
+    // Ensure path is properly passed when nested deeper than 1 level
+    if (schemaValue && typeof schemaValue === 'object' && !Array.isArray(schemaValue)) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "provider-options-group",
+            style: {
+                borderLeft: path.length > 0 ? '1px solid var(--theme-elevation-150)' : 'none',
+                display: 'grid',
+                gap: '1rem',
+                marginLeft: path.length > 0 ? '1rem' : '0',
+                paddingLeft: path.length > 0 ? '1rem' : '0'
+            },
+            children: [
+                path.length > 0 && /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    style: {
+                        fontWeight: 600,
+                        marginBottom: '-0.5rem'
+                    },
+                    children: nodeKey
+                }),
+                Object.entries(schemaValue).map(([key, childSchema])=>/*#__PURE__*/ _jsx(ProviderOptionsTree, {
+                        disabled: disabled,
+                        onChange: onChange,
+                        path: [
+                            ...path,
+                            key
+                        ],
+                        schemaValue: childSchema,
+                        selectedValue: selectedValue?.[key]
+                    }, key))
+            ]
+        });
+    }
+    // Handle Array as Select Menu options
+    if (Array.isArray(schemaValue)) {
+        const options = schemaValue.map((item)=>({
+                label: String(item),
+                value: String(item)
+            }));
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type select",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: inputId,
+                    children: nodeKey
+                }),
+                /*#__PURE__*/ _jsx(SelectInput, {
+                    isClearable: true,
+                    name: inputId,
+                    onChange: (selected)=>{
+                        if (selected && typeof selected === 'object' && 'value' in selected) {
+                            onChange(path, selected.value);
+                            return;
+                        }
+                        onChange(path, undefined);
+                    },
+                    options: options,
+                    path: inputId,
+                    readOnly: disabled,
+                    value: selectedValue !== undefined ? String(selectedValue) : undefined
+                })
+            ]
+        });
+    }
+    // Handle Boolean as Select Menu True/False
+    if (typeof schemaValue === 'boolean') {
+        const booleanOptions = [
+            {
+                label: 'True',
+                value: 'true'
+            },
+            {
+                label: 'False',
+                value: 'false'
+            }
+        ];
+        const stringVal = selectedValue === true ? 'true' : selectedValue === false ? 'false' : undefined;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type select",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: inputId,
+                    children: nodeKey
+                }),
+                /*#__PURE__*/ _jsx(SelectInput, {
+                    isClearable: true,
+                    name: inputId,
+                    onChange: (selected)=>{
+                        if (selected && typeof selected === 'object' && 'value' in selected) {
+                            onChange(path, selected.value === 'true');
+                            return;
+                        }
+                        onChange(path, undefined);
+                    },
+                    options: booleanOptions,
+                    path: inputId,
+                    readOnly: disabled,
+                    value: stringVal
+                })
+            ]
+        });
+    }
+    // Handle Number Input
+    if (typeof schemaValue === 'number') {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type number",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: inputId,
+                    children: nodeKey
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    disabled: disabled,
+                    id: inputId,
+                    name: inputId,
+                    onChange: (e)=>{
+                        const val = e.target.value;
+                        onChange(path, val === '' ? undefined : Number(val));
+                    },
+                    style: {
+                        width: '100%'
+                    },
+                    type: "number",
+                    value: typeof selectedValue === 'number' && !Number.isNaN(selectedValue) ? Number(selectedValue) : ''
+                })
+            ]
+        });
+    }
+    // Handle Text Input
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type text",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: inputId,
+                children: nodeKey
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                disabled: disabled,
+                id: inputId,
+                name: inputId,
+                onChange: (e)=>{
+                    const val = e.target.value;
+                    onChange(path, val.trim() === '' ? undefined : val);
+                },
+                style: {
+                    width: '100%'
+                },
+                type: "text",
+                value: typeof selectedValue === 'string' ? selectedValue : ''
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=ProviderOptionsTree.js.map

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/InstructionProviderOptions/ProviderOptionsTree.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput } from '@payloadcms/ui'\nimport type { OptionObject } from 'payload'\nimport React from 'react'\n\ntype Primitive = boolean | null | number | string | undefined\ntype PrimitiveArray = number[] | string[]\n\ntype ProviderOptionTreeNodeProps = {\n  disabled?: boolean\n  onChange: (path: string[], value: any) => void\n  path: string[]\n  schemaValue: Primitive | PrimitiveArray | Record<string, any>\n  selectedValue: any\n}\n\nexport const ProviderOptionsTree: React.FC<ProviderOptionTreeNodeProps> = ({\n  disabled,\n  onChange,\n  path,\n  schemaValue,\n  selectedValue,\n}) => {\n  const nodeKey = path.length > 0 ? path[path.length - 1] : 'root'\n  const inputId = `po-${path.join('-')}`\n\n  // Ensure path is properly passed when nested deeper than 1 level\n  if (schemaValue && typeof schemaValue === 'object' && !Array.isArray(schemaValue)) {\n    return (\n      <div className=\"provider-options-group\" style={{ \n        borderLeft: path.length > 0 ? '1px solid var(--theme-elevation-150)' : 'none', \n        display: 'grid', \n        gap: '1rem', \n        marginLeft: path.length > 0 ? '1rem' : '0', \n        paddingLeft: path.length > 0 ? '1rem' : '0' \n      }}>\n        {path.length > 0 && <div className=\"field-label\" style={{ fontWeight: 600, marginBottom: '-0.5rem' }}>{nodeKey}</div>}\n        {Object.entries(schemaValue).map(([key, childSchema]) => (\n          <ProviderOptionsTree\n            disabled={disabled}\n            key={key}\n            onChange={onChange}\n            path={[...path, key]}\n            schemaValue={childSchema as any}\n            selectedValue={selectedValue?.[key]}\n          />\n        ))}\n      </div>\n    )\n  }\n\n  // Handle Array as Select Menu options\n  if (Array.isArray(schemaValue)) {\n    const options: OptionObject[] = schemaValue.map((item) => ({\n      label: String(item),\n      value: String(item),\n    }))\n\n    return (\n      <div className=\"field-type select\">\n        <label className=\"field-label\" htmlFor={inputId}>\n          {nodeKey}\n        </label>\n        <SelectInput\n          isClearable\n          name={inputId}\n          onChange={(selected) => {\n            if (selected && typeof selected === 'object' && 'value' in selected) {\n              onChange(path, (selected as OptionObject).value)\n              return\n            }\n            onChange(path, undefined)\n          }}\n          options={options}\n          path={inputId}\n          readOnly={disabled}\n          value={selectedValue !== undefined ? String(selectedValue) : undefined}\n        />\n      </div>\n    )\n  }\n\n  // Handle Boolean as Select Menu True/False\n  if (typeof schemaValue === 'boolean') {\n    const booleanOptions: OptionObject[] = [\n      { label: 'True', value: 'true' },\n      { label: 'False', value: 'false' },\n    ]\n    const stringVal = selectedValue === true ? 'true' : selectedValue === false ? 'false' : undefined\n\n    return (\n      <div className=\"field-type select\">\n        <label className=\"field-label\" htmlFor={inputId}>\n          {nodeKey}\n        </label>\n        <SelectInput\n          isClearable\n          name={inputId}\n          onChange={(selected) => {\n            if (selected && typeof selected === 'object' && 'value' in selected) {\n              onChange(path, (selected as OptionObject).value === 'true')\n              return\n            }\n            onChange(path, undefined)\n          }}\n          options={booleanOptions}\n          path={inputId}\n          readOnly={disabled}\n          value={stringVal}\n        />\n      </div>\n    )\n  }\n\n  // Handle Number Input\n  if (typeof schemaValue === 'number') {\n    return (\n      <div className=\"field-type number\">\n        <label className=\"field-label\" htmlFor={inputId}>\n          {nodeKey}\n        </label>\n        <input\n          disabled={disabled}\n          id={inputId}\n          name={inputId}\n          onChange={(e) => {\n            const val = e.target.value\n            onChange(path, val === '' ? undefined : Number(val))\n          }}\n          style={{ width: '100%' }}\n          type=\"number\"\n          value={\n            typeof selectedValue === 'number' && !Number.isNaN(selectedValue)\n              ? Number(selectedValue)\n              : ''\n          }\n        />\n      </div>\n    )\n  }\n\n  // Handle Text Input\n  return (\n    <div className=\"field-type text\">\n      <label className=\"field-label\" htmlFor={inputId}>\n        {nodeKey}\n      </label>\n      <input\n        disabled={disabled}\n        id={inputId}\n        name={inputId}\n        onChange={(e) => {\n          const val = e.target.value\n          onChange(path, val.trim() === '' ? undefined : val)\n        }}\n        style={{ width: '100%' }}\n        type=\"text\"\n        value={typeof selectedValue === 'string' ? selectedValue : ''}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","React","ProviderOptionsTree","disabled","onChange","path","schemaValue","selectedValue","nodeKey","length","inputId","join","Array","isArray","div","className","style","borderLeft","display","gap","marginLeft","paddingLeft","fontWeight","marginBottom","Object","entries","map","key","childSchema","options","item","label","String","value","htmlFor","isClearable","name","selected","undefined","readOnly","booleanOptions","stringVal","input","id","e","val","target","Number","width","type","isNaN","trim"],"mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,iBAAgB;AAE5C,OAAOC,WAAW,QAAO;AAazB,OAAO,MAAMC,sBAA6D,CAAC,EACzEC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,WAAW,EACXC,aAAa,EACd;IACC,MAAMC,UAAUH,KAAKI,MAAM,GAAG,IAAIJ,IAAI,CAACA,KAAKI,MAAM,GAAG,EAAE,GAAG;IAC1D,MAAMC,UAAU,CAAC,GAAG,EAAEL,KAAKM,IAAI,CAAC,KAAK,CAAC;IAEtC,iEAAiE;IACjE,IAAIL,eAAe,OAAOA,gBAAgB,YAAY,CAACM,MAAMC,OAAO,CAACP,cAAc;QACjF,qBACE,MAACQ;YAAIC,WAAU;YAAyBC,OAAO;gBAC7CC,YAAYZ,KAAKI,MAAM,GAAG,IAAI,yCAAyC;gBACvES,SAAS;gBACTC,KAAK;gBACLC,YAAYf,KAAKI,MAAM,GAAG,IAAI,SAAS;gBACvCY,aAAahB,KAAKI,MAAM,GAAG,IAAI,SAAS;YAC1C;;gBACGJ,KAAKI,MAAM,GAAG,mBAAK,KAACK;oBAAIC,WAAU;oBAAcC,OAAO;wBAAEM,YAAY;wBAAKC,cAAc;oBAAU;8BAAIf;;gBACtGgB,OAAOC,OAAO,CAACnB,aAAaoB,GAAG,CAAC,CAAC,CAACC,KAAKC,YAAY,iBAClD,KAAC1B;wBACCC,UAAUA;wBAEVC,UAAUA;wBACVC,MAAM;+BAAIA;4BAAMsB;yBAAI;wBACpBrB,aAAasB;wBACbrB,eAAeA,eAAe,CAACoB,IAAI;uBAJ9BA;;;IASf;IAEA,sCAAsC;IACtC,IAAIf,MAAMC,OAAO,CAACP,cAAc;QAC9B,MAAMuB,UAA0BvB,YAAYoB,GAAG,CAAC,CAACI,OAAU,CAAA;gBACzDC,OAAOC,OAAOF;gBACdG,OAAOD,OAAOF;YAChB,CAAA;QAEA,qBACE,MAAChB;YAAIC,WAAU;;8BACb,KAACgB;oBAAMhB,WAAU;oBAAcmB,SAASxB;8BACrCF;;8BAEH,KAACR;oBACCmC,WAAW;oBACXC,MAAM1B;oBACNN,UAAU,CAACiC;wBACT,IAAIA,YAAY,OAAOA,aAAa,YAAY,WAAWA,UAAU;4BACnEjC,SAASC,MAAM,AAACgC,SAA0BJ,KAAK;4BAC/C;wBACF;wBACA7B,SAASC,MAAMiC;oBACjB;oBACAT,SAASA;oBACTxB,MAAMK;oBACN6B,UAAUpC;oBACV8B,OAAO1B,kBAAkB+B,YAAYN,OAAOzB,iBAAiB+B;;;;IAIrE;IAEA,2CAA2C;IAC3C,IAAI,OAAOhC,gBAAgB,WAAW;QACpC,MAAMkC,iBAAiC;YACrC;gBAAET,OAAO;gBAAQE,OAAO;YAAO;YAC/B;gBAAEF,OAAO;gBAASE,OAAO;YAAQ;SAClC;QACD,MAAMQ,YAAYlC,kBAAkB,OAAO,SAASA,kBAAkB,QAAQ,UAAU+B;QAExF,qBACE,MAACxB;YAAIC,WAAU;;8BACb,KAACgB;oBAAMhB,WAAU;oBAAcmB,SAASxB;8BACrCF;;8BAEH,KAACR;oBACCmC,WAAW;oBACXC,MAAM1B;oBACNN,UAAU,CAACiC;wBACT,IAAIA,YAAY,OAAOA,aAAa,YAAY,WAAWA,UAAU;4BACnEjC,SAASC,MAAM,AAACgC,SAA0BJ,KAAK,KAAK;4BACpD;wBACF;wBACA7B,SAASC,MAAMiC;oBACjB;oBACAT,SAASW;oBACTnC,MAAMK;oBACN6B,UAAUpC;oBACV8B,OAAOQ;;;;IAIf;IAEA,sBAAsB;IACtB,IAAI,OAAOnC,gBAAgB,UAAU;QACnC,qBACE,MAACQ;YAAIC,WAAU;;8BACb,KAACgB;oBAAMhB,WAAU;oBAAcmB,SAASxB;8BACrCF;;8BAEH,KAACkC;oBACCvC,UAAUA;oBACVwC,IAAIjC;oBACJ0B,MAAM1B;oBACNN,UAAU,CAACwC;wBACT,MAAMC,MAAMD,EAAEE,MAAM,CAACb,KAAK;wBAC1B7B,SAASC,MAAMwC,QAAQ,KAAKP,YAAYS,OAAOF;oBACjD;oBACA7B,OAAO;wBAAEgC,OAAO;oBAAO;oBACvBC,MAAK;oBACLhB,OACE,OAAO1B,kBAAkB,YAAY,CAACwC,OAAOG,KAAK,CAAC3C,iBAC/CwC,OAAOxC,iBACP;;;;IAKd;IAEA,oBAAoB;IACpB,qBACE,MAACO;QAAIC,WAAU;;0BACb,KAACgB;gBAAMhB,WAAU;gBAAcmB,SAASxB;0BACrCF;;0BAEH,KAACkC;gBACCvC,UAAUA;gBACVwC,IAAIjC;gBACJ0B,MAAM1B;gBACNN,UAAU,CAACwC;oBACT,MAAMC,MAAMD,EAAEE,MAAM,CAACb,KAAK;oBAC1B7B,SAASC,MAAMwC,IAAIM,IAAI,OAAO,KAAKb,YAAYO;gBACjD;gBACA7B,OAAO;oBAAEgC,OAAO;gBAAO;gBACvBC,MAAK;gBACLhB,OAAO,OAAO1B,kBAAkB,WAAWA,gBAAgB;;;;AAInE,EAAC"}

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.jsx

@@ -0,0 +1,83 @@
+'use client';
+import { SelectInput } from '@payloadcms/ui';
+import React from 'react';
+export const ProviderOptionsTree = ({ disabled, onChange, path, schemaValue, selectedValue, }) => {
+    const nodeKey = path.length > 0 ? path[path.length - 1] : 'root';
+    const inputId = `po-${path.join('-')}`;
+    // Ensure path is properly passed when nested deeper than 1 level
+    if (schemaValue && typeof schemaValue === 'object' && !Array.isArray(schemaValue)) {
+        return (<div className="provider-options-group" style={{
+                borderLeft: path.length > 0 ? '1px solid var(--theme-elevation-150)' : 'none',
+                display: 'grid',
+                gap: '1rem',
+                marginLeft: path.length > 0 ? '1rem' : '0',
+                paddingLeft: path.length > 0 ? '1rem' : '0'
+            }}>
+        {path.length > 0 && <div className="field-label" style={{ fontWeight: 600, marginBottom: '-0.5rem' }}>{nodeKey}</div>}
+        {Object.entries(schemaValue).map(([key, childSchema]) => (<ProviderOptionsTree disabled={disabled} key={key} onChange={onChange} path={[...path, key]} schemaValue={childSchema} selectedValue={selectedValue?.[key]}/>))}
+      </div>);
+    }
+    // Handle Array as Select Menu options
+    if (Array.isArray(schemaValue)) {
+        const options = schemaValue.map((item) => ({
+            label: String(item),
+            value: String(item),
+        }));
+        return (<div className="field-type select">
+        <label className="field-label" htmlFor={inputId}>
+          {nodeKey}
+        </label>
+        <SelectInput isClearable name={inputId} onChange={(selected) => {
+                if (selected && typeof selected === 'object' && 'value' in selected) {
+                    onChange(path, selected.value);
+                    return;
+                }
+                onChange(path, undefined);
+            }} options={options} path={inputId} readOnly={disabled} value={selectedValue !== undefined ? String(selectedValue) : undefined}/>
+      </div>);
+    }
+    // Handle Boolean as Select Menu True/False
+    if (typeof schemaValue === 'boolean') {
+        const booleanOptions = [
+            { label: 'True', value: 'true' },
+            { label: 'False', value: 'false' },
+        ];
+        const stringVal = selectedValue === true ? 'true' : selectedValue === false ? 'false' : undefined;
+        return (<div className="field-type select">
+        <label className="field-label" htmlFor={inputId}>
+          {nodeKey}
+        </label>
+        <SelectInput isClearable name={inputId} onChange={(selected) => {
+                if (selected && typeof selected === 'object' && 'value' in selected) {
+                    onChange(path, selected.value === 'true');
+                    return;
+                }
+                onChange(path, undefined);
+            }} options={booleanOptions} path={inputId} readOnly={disabled} value={stringVal}/>
+      </div>);
+    }
+    // Handle Number Input
+    if (typeof schemaValue === 'number') {
+        return (<div className="field-type number">
+        <label className="field-label" htmlFor={inputId}>
+          {nodeKey}
+        </label>
+        <input disabled={disabled} id={inputId} name={inputId} onChange={(e) => {
+                const val = e.target.value;
+                onChange(path, val === '' ? undefined : Number(val));
+            }} style={{ width: '100%' }} type="number" value={typeof selectedValue === 'number' && !Number.isNaN(selectedValue)
+                ? Number(selectedValue)
+                : ''}/>
+      </div>);
+    }
+    // Handle Text Input
+    return (<div className="field-type text">
+      <label className="field-label" htmlFor={inputId}>
+        {nodeKey}
+      </label>
+      <input disabled={disabled} id={inputId} name={inputId} onChange={(e) => {
+            const val = e.target.value;
+            onChange(path, val.trim() === '' ? undefined : val);
+        }} style={{ width: '100%' }} type="text" value={typeof selectedValue === 'string' ? selectedValue : ''}/>
+    </div>);
+};

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

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

package/dist/ui/InstructionProviderOptions/index.js

@@ -0,0 +1,157 @@
+'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, useMemo } from 'react';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+import { ProviderOptionsTree } from './ProviderOptionsTree.js';
+function inferUseCase(fieldPath) {
+    const parentName = fieldPath.split('.').slice(-2)[0];
+    if (parentName === 'image-settings') {
+        return 'image';
+    }
+    if (parentName === 'tts-settings') {
+        return 'tts';
+    }
+    if (parentName === 'video-settings') {
+        return 'video';
+    }
+    return 'text';
+}
+export const InstructionProviderOptions = ({ path })=>{
+    const { data: aiSettings } = useAISettings();
+    const fieldPath = path || '';
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const useCase = useMemo(()=>inferUseCase(fieldPath), [
+        fieldPath
+    ]);
+    const providerField = useFormFields(([fields])=>fields[providerPath]);
+    const provider = providerField?.value;
+    const { setValue: setProviderOptionsValues, value: providerOptionsValues } = useField({
+        path: fieldPath
+    });
+    // 1. Find the provider's schema for this use case
+    const schema = useMemo(()=>{
+        if (!provider || !aiSettings?.defaults) {
+            return null;
+        }
+        const useCaseDefaults = aiSettings.defaults[useCase];
+        // We stored the raw schema object directly under schemas[provider] during autoSetup
+        const schemas = useCaseDefaults?.schema;
+        return schemas?.[provider] || null;
+    }, [
+        aiSettings,
+        provider,
+        useCase
+    ]);
+    const providerLabel = useMemo(()=>{
+        if (!provider) {
+            return undefined;
+        }
+        const providers = Array.isArray(aiSettings?.providers) ? aiSettings.providers : [];
+        const configuredProvider = providers.find((item)=>item && typeof item === 'object' && 'blockType' in item && item.blockType === provider);
+        if (configuredProvider?.providerName) {
+            return configuredProvider.providerName;
+        }
+        return provider;
+    }, [
+        aiSettings?.providers,
+        provider
+    ]);
+    const handleOptionChange = useCallback((keyPath, targetValue)=>{
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValues,
+            keyPath,
+            provider,
+            targetValue
+        });
+        setProviderOptionsValues(nextValue);
+    }, [
+        providerOptionsValues,
+        provider,
+        setProviderOptionsValues
+    ]);
+    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 || typeof schema !== 'object' || 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 are configured for this provider and capability."
+                })
+            ]
+        });
+    }
+    const selectedProviderValues = providerOptionsValues?.[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: [
+                    "Override ",
+                    providerLabel || provider,
+                    " provider options for this field."
+                ]
+            }),
+            /*#__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/InstructionProviderOptions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/InstructionProviderOptions/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, useMemo } from 'react'\n\nimport { useAISettings } from '../hooks/useAISettings.js'\nimport { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js'\nimport { ProviderOptionsTree } from './ProviderOptionsTree.js'\n\nfunction inferUseCase(fieldPath: string): 'image' | 'text' | 'tts' | 'video' {\n  const parentName = fieldPath.split('.').slice(-2)[0]\n\n  if (parentName === 'image-settings') {\n    return 'image'\n  }\n  if (parentName === 'tts-settings') {\n    return 'tts'\n  }\n  if (parentName === 'video-settings') {\n    return 'video'\n  }\n\n  return 'text'\n}\n\nexport const InstructionProviderOptions: FieldClientComponent = ({ path }) => {\n  const { data: aiSettings } = useAISettings()\n\n  const fieldPath = (path as string) || ''\n  const groupPath = fieldPath.split('.').slice(0, -1).join('.')\n  const providerPath = `${groupPath}.provider`\n  const useCase = useMemo(() => inferUseCase(fieldPath), [fieldPath])\n\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const provider = providerField?.value as string | undefined\n\n  const { setValue: setProviderOptionsValues, value: providerOptionsValues } = useField<unknown>({\n    path: fieldPath,\n  })\n\n  // 1. Find the provider's schema for this use case\n  const schema = useMemo(() => {\n    if (!provider || !aiSettings?.defaults) {\n      return null\n    }\n    const useCaseDefaults = (aiSettings.defaults as Record<string, unknown>)[useCase] as Record<\n      string,\n      unknown\n    >\n    // We stored the raw schema object directly under schemas[provider] during autoSetup\n    const schemas = useCaseDefaults?.schema as Record<string, unknown> | undefined\n    return schemas?.[provider] || null\n  }, [aiSettings, provider, useCase])\n\n  const providerLabel = useMemo(() => {\n    if (!provider) {\n      return undefined\n    }\n\n    const providers = Array.isArray(aiSettings?.providers) ? aiSettings.providers : []\n    const configuredProvider = providers.find(\n      (item) =>\n        item &&\n        typeof item === 'object' &&\n        'blockType' in item &&\n        (item as { blockType?: unknown }).blockType === provider,\n    ) as { providerName?: string } | undefined\n\n    if (configuredProvider?.providerName) {\n      return configuredProvider.providerName\n    }\n\n    return provider\n  }, [aiSettings?.providers, provider])\n\n  const handleOptionChange = useCallback(\n    (keyPath: string[], targetValue: unknown) => {\n      const nextValue = updateProviderOptionsValue({\n        currentValue: providerOptionsValues,\n        keyPath,\n        provider,\n        targetValue,\n      })\n      setProviderOptionsValues(nextValue)\n    },\n    [providerOptionsValues, provider, setProviderOptionsValues],\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 || typeof schema !== 'object' || 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 are configured for this provider and capability.\n        </p>\n      </div>\n    )\n  }\n\n  const selectedProviderValues = (providerOptionsValues as Record<string, any>)?.[provider] || {}\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        Override {providerLabel || provider} provider options for this field.\n      </p>\n\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","useMemo","useAISettings","updateProviderOptionsValue","ProviderOptionsTree","inferUseCase","fieldPath","parentName","split","slice","InstructionProviderOptions","path","data","aiSettings","groupPath","join","providerPath","useCase","providerField","fields","provider","value","setValue","setProviderOptionsValues","providerOptionsValues","schema","defaults","useCaseDefaults","schemas","providerLabel","undefined","providers","Array","isArray","configuredProvider","find","item","blockType","providerName","handleOptionChange","keyPath","targetValue","nextValue","currentValue","div","className","style","marginTop","p","color","margin","Object","keys","length","selectedProviderValues","marginBottom","display","flexDirection","onChange","schemaValue","selectedValue"],"mappings":"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"}

package/dist/ui/InstructionProviderOptions/index.jsx

@@ -0,0 +1,92 @@
+'use client';
+import { useField, useFormFields } from '@payloadcms/ui';
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { useAISettings } from '../hooks/useAISettings.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+import { ProviderOptionsTree } from './ProviderOptionsTree.js';
+function inferUseCase(fieldPath) {
+    const parentName = fieldPath.split('.').slice(-2)[0];
+    if (parentName === 'image-settings') {
+        return 'image';
+    }
+    if (parentName === 'tts-settings') {
+        return 'tts';
+    }
+    if (parentName === 'video-settings') {
+        return 'video';
+    }
+    return 'text';
+}
+export const InstructionProviderOptions = ({ path }) => {
+    const { data: aiSettings } = useAISettings();
+    const fieldPath = path || '';
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const useCase = useMemo(() => inferUseCase(fieldPath), [fieldPath]);
+    const providerField = useFormFields(([fields]) => fields[providerPath]);
+    const provider = providerField?.value;
+    const { setValue: setProviderOptionsValues, value: providerOptionsValues } = useField({
+        path: fieldPath,
+    });
+    // 1. Find the provider's schema for this use case
+    const schema = useMemo(() => {
+        if (!provider || !aiSettings?.defaults) {
+            return null;
+        }
+        const useCaseDefaults = aiSettings.defaults[useCase];
+        // We stored the raw schema object directly under schemas[provider] during autoSetup
+        const schemas = useCaseDefaults?.schema;
+        return schemas?.[provider] || null;
+    }, [aiSettings, provider, useCase]);
+    const providerLabel = useMemo(() => {
+        if (!provider) {
+            return undefined;
+        }
+        const providers = Array.isArray(aiSettings?.providers) ? aiSettings.providers : [];
+        const configuredProvider = providers.find((item) => item &&
+            typeof item === 'object' &&
+            'blockType' in item &&
+            item.blockType === provider);
+        if (configuredProvider?.providerName) {
+            return configuredProvider.providerName;
+        }
+        return provider;
+    }, [aiSettings?.providers, provider]);
+    const handleOptionChange = useCallback((keyPath, targetValue) => {
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValues,
+            keyPath,
+            provider,
+            targetValue,
+        });
+        setProviderOptionsValues(nextValue);
+    }, [providerOptionsValues, provider, setProviderOptionsValues]);
+    if (!provider) {
+        return (<div className="field-type" style={{ marginTop: '1rem' }}>
+        <div className="field-label">Provider Options</div>
+        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>
+          Select a provider to configure provider options.
+        </p>
+      </div>);
+    }
+    if (!schema || typeof schema !== 'object' || Object.keys(schema).length === 0) {
+        return (<div className="field-type" style={{ marginTop: '1rem' }}>
+        <div className="field-label">Provider Options</div>
+        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>
+          No provider options are configured for this provider and capability.
+        </p>
+      </div>);
+    }
+    const selectedProviderValues = providerOptionsValues?.[provider] || {};
+    return (<div className="field-type" style={{ marginTop: '1rem' }}>
+      <div className="field-label">Provider Options</div>
+      <p style={{ color: 'var(--theme-elevation-500)', marginBottom: '0.75rem', marginTop: 0 }}>
+        Override {providerLabel || provider} provider options for this field.
+      </p>
+
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <ProviderOptionsTree onChange={handleOptionChange} path={[]} schemaValue={schema} selectedValue={selectedProviderValues}/>
+      </div>
+    </div>);
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/VoicesFetcher/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldClientComponent } from 'payload'\n\nimport { Button, toast, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useCallback, useState } from 'react'\n\nimport { PLUGIN_API_ENDPOINT_FETCH_VOICES } from '../../defaults.js'\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\n/**\n * VoicesFetcher Component\n * Fetches voices from ElevenLabs API (server-side) and populates the voices array field\n * SECURE: API key is never exposed to the client\n */\nexport const VoicesFetcher: FieldClientComponent = ({ path }) => {\n  const [loading, setLoading] = useState(false)\n\n  // Get the parent path (the block path)\n  const fieldPath = (path as string) || ''\n  const blockPath = fieldPath.split('.').slice(0, -1).join('.')\n  const voicesPath = `${blockPath}.voices`\n\n  const { setValue } = useField<Voice[]>({ path: voicesPath })\n\n  const fetchVoices = useCallback(async () => {\n    setLoading(true)\n\n    const controller = new AbortController()\n    const timeoutId = setTimeout(() => controller.abort(), 30000) // 30s timeout\n\n    try {\n      // Call server endpoint - it will read the API key from the database\n      const response = await fetch(`/api${PLUGIN_API_ENDPOINT_FETCH_VOICES}`, {\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n        signal: controller.signal,\n      })\n\n      clearTimeout(timeoutId)\n\n      if (!response.ok) {\n        let errorMessage = 'Failed to fetch voices'\n        try {\n          const error = await response.json()\n          errorMessage = error.message || errorMessage\n        } catch (e) {\n          // If response is not JSON (e.g. 504 Gateway Timeout HTML), use status text\n          errorMessage = `Error ${response.status}: ${response.statusText}`\n        }\n        throw new Error(errorMessage)\n      }\n\n      const data = await response.json()\n      const voices: Voice[] = data.voices || []\n\n      // Replace the entire array value at once\n      // This is much more performant than dispatching ADD_ROW actions in a loop\n      setValue(voices)\n\n      toast.success(`Successfully fetched ${voices.length} voices!`)\n    } catch (error: unknown) {\n      const msg = error instanceof Error ? error.message : 'Failed to fetch voices'\n      if (error instanceof Error && error.name === 'AbortError') {\n        toast.error('Request timed out. Please try again.')\n      } else {\n        toast.error(`Error: ${msg}`)\n      }\n    } finally {\n      setLoading(false)\n      clearTimeout(timeoutId)\n    }\n  }, [setValue])\n\n  return (\n    <div style={{ marginBottom: '20px' }}>\n      <Button buttonStyle=\"secondary\" disabled={loading} margin={false} onClick={fetchVoices} size=\"medium\">\n        {loading ? 'Fetching Voices...' : 'Fetch Voices'}\n      </Button>\n      <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px', marginTop: '8px' }}>\n        This will fetch all available voices from your ElevenLabs account. Make sure you have saved\n        your API key in the Setup tab first.\n      </p>\n    </div>\n  )\n}\n"],"names":["Button","toast","useField","React","useCallback","useState","PLUGIN_API_ENDPOINT_FETCH_VOICES","VoicesFetcher","path","loading","setLoading","fieldPath","blockPath","split","slice","join","voicesPath","setValue","fetchVoices","controller","AbortController","timeoutId","setTimeout","abort","response","fetch","headers","method","signal","clearTimeout","ok","errorMessage","error","json","message","e","status","statusText","Error","data","voices","success","length","msg","name","div","style","marginBottom","buttonStyle","disabled","margin","onClick","size","p","color","fontSize","marginTop"],"mappings":"AAAA;;AAIA,SAASA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,QAAuB,iBAAgB;AACvE,OAAOC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAEpD,SAASC,gCAAgC,QAAQ,oBAAmB;AAWpE;;;;CAIC,GACD,OAAO,MAAMC,gBAAsC,CAAC,EAAEC,IAAI,EAAE;IAC1D,MAAM,CAACC,SAASC,WAAW,GAAGL,SAAS;IAEvC,uCAAuC;IACvC,MAAMM,YAAY,AAACH,QAAmB;IACtC,MAAMI,YAAYD,UAAUE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACzD,MAAMC,aAAa,CAAC,EAAEJ,UAAU,OAAO,CAAC;IAExC,MAAM,EAAEK,QAAQ,EAAE,GAAGf,SAAkB;QAAEM,MAAMQ;IAAW;IAE1D,MAAME,cAAcd,YAAY;QAC9BM,WAAW;QAEX,MAAMS,aAAa,IAAIC;QACvB,MAAMC,YAAYC,WAAW,IAAMH,WAAWI,KAAK,IAAI,OAAO,cAAc;;QAE5E,IAAI;YACF,oEAAoE;YACpE,MAAMC,WAAW,MAAMC,MAAM,CAAC,IAAI,EAAEnB,iCAAiC,CAAC,EAAE;gBACtEoB,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;gBACRC,QAAQT,WAAWS,MAAM;YAC3B;YAEAC,aAAaR;YAEb,IAAI,CAACG,SAASM,EAAE,EAAE;gBAChB,IAAIC,eAAe;gBACnB,IAAI;oBACF,MAAMC,QAAQ,MAAMR,SAASS,IAAI;oBACjCF,eAAeC,MAAME,OAAO,IAAIH;gBAClC,EAAE,OAAOI,GAAG;oBACV,2EAA2E;oBAC3EJ,eAAe,CAAC,MAAM,EAAEP,SAASY,MAAM,CAAC,EAAE,EAAEZ,SAASa,UAAU,CAAC,CAAC;gBACnE;gBACA,MAAM,IAAIC,MAAMP;YAClB;YAEA,MAAMQ,OAAO,MAAMf,SAASS,IAAI;YAChC,MAAMO,SAAkBD,KAAKC,MAAM,IAAI,EAAE;YAEzC,yCAAyC;YACzC,0EAA0E;YAC1EvB,SAASuB;YAETvC,MAAMwC,OAAO,CAAC,CAAC,qBAAqB,EAAED,OAAOE,MAAM,CAAC,QAAQ,CAAC;QAC/D,EAAE,OAAOV,OAAgB;YACvB,MAAMW,MAAMX,iBAAiBM,QAAQN,MAAME,OAAO,GAAG;YACrD,IAAIF,iBAAiBM,SAASN,MAAMY,IAAI,KAAK,cAAc;gBACzD3C,MAAM+B,KAAK,CAAC;YACd,OAAO;gBACL/B,MAAM+B,KAAK,CAAC,CAAC,OAAO,EAAEW,IAAI,CAAC;YAC7B;QACF,SAAU;YACRjC,WAAW;YACXmB,aAAaR;QACf;IACF,GAAG;QAACJ;KAAS;IAEb,qBACE,MAAC4B;QAAIC,OAAO;YAAEC,cAAc;QAAO;;0BACjC,KAAC/C;gBAAOgD,aAAY;gBAAYC,UAAUxC;gBAASyC,QAAQ;gBAAOC,SAASjC;gBAAakC,MAAK;0BAC1F3C,UAAU,uBAAuB;;0BAEpC,KAAC4C;gBAAEP,OAAO;oBAAEQ,OAAO;oBAA8BC,UAAU;oBAAQC,WAAW;gBAAM;0BAAG;;;;AAM7F,EAAC"}
+{"version":3,"sources":["../../../src/ui/VoicesFetcher/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldClientComponent } from 'payload'\n\nimport { Button, toast, useField } from '@payloadcms/ui'\nimport React, { useCallback, useState } from 'react'\n\nimport type { Voice } from '../shared/types.js'\n\nimport { PLUGIN_API_ENDPOINT_FETCH_VOICES } from '../../defaults.js'\n\n\n/**\n * VoicesFetcher Component\n * Fetches voices from ElevenLabs API (server-side) and populates the voices array field\n * SECURE: API key is never exposed to the client\n */\nexport const VoicesFetcher: FieldClientComponent = ({ path }) => {\n  const [loading, setLoading] = useState(false)\n\n  // Get the parent path (the block path)\n  const fieldPath = (path as string) || ''\n  const blockPath = fieldPath.split('.').slice(0, -1).join('.')\n  const voicesPath = `${blockPath}.voices`\n\n  const { setValue } = useField<Voice[]>({ path: voicesPath })\n\n  const fetchVoices = useCallback(async () => {\n    setLoading(true)\n\n    const controller = new AbortController()\n    const timeoutId = setTimeout(() => controller.abort(), 30000) // 30s timeout\n\n    try {\n      // Call server endpoint - it will read the API key from the database\n      const response = await fetch(`/api${PLUGIN_API_ENDPOINT_FETCH_VOICES}`, {\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n        signal: controller.signal,\n      })\n\n      clearTimeout(timeoutId)\n\n      if (!response.ok) {\n        let errorMessage = 'Failed to fetch voices'\n        try {\n          const error = await response.json()\n          errorMessage = error.message || errorMessage\n        } catch (e) {\n          // If response is not JSON (e.g. 504 Gateway Timeout HTML), use status text\n          errorMessage = `Error ${response.status}: ${response.statusText}`\n        }\n        throw new Error(errorMessage)\n      }\n\n      const data = await response.json()\n      const voices: Voice[] = data.voices || []\n\n      // Replace the entire array value at once\n      // This is much more performant than dispatching ADD_ROW actions in a loop\n      setValue(voices)\n\n      toast.success(`Successfully fetched ${voices.length} voices!`)\n    } catch (error: unknown) {\n      const msg = error instanceof Error ? error.message : 'Failed to fetch voices'\n      if (error instanceof Error && error.name === 'AbortError') {\n        toast.error('Request timed out. Please try again.')\n      } else {\n        toast.error(`Error: ${msg}`)\n      }\n    } finally {\n      setLoading(false)\n      clearTimeout(timeoutId)\n    }\n  }, [setValue])\n\n  return (\n    <div style={{ marginBottom: '20px' }}>\n      <Button buttonStyle=\"secondary\" disabled={loading} margin={false} onClick={fetchVoices} size=\"medium\">\n        {loading ? 'Fetching Voices...' : 'Fetch Voices'}\n      </Button>\n      <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px', marginTop: '8px' }}>\n        This will fetch all available voices from your ElevenLabs account. Make sure you have saved\n        your API key in the Setup tab first.\n      </p>\n    </div>\n  )\n}\n"],"names":["Button","toast","useField","React","useCallback","useState","PLUGIN_API_ENDPOINT_FETCH_VOICES","VoicesFetcher","path","loading","setLoading","fieldPath","blockPath","split","slice","join","voicesPath","setValue","fetchVoices","controller","AbortController","timeoutId","setTimeout","abort","response","fetch","headers","method","signal","clearTimeout","ok","errorMessage","error","json","message","e","status","statusText","Error","data","voices","success","length","msg","name","div","style","marginBottom","buttonStyle","disabled","margin","onClick","size","p","color","fontSize","marginTop"],"mappings":"AAAA;;AAIA,SAASA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,iBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAIpD,SAASC,gCAAgC,QAAQ,oBAAmB;AAGpE;;;;CAIC,GACD,OAAO,MAAMC,gBAAsC,CAAC,EAAEC,IAAI,EAAE;IAC1D,MAAM,CAACC,SAASC,WAAW,GAAGL,SAAS;IAEvC,uCAAuC;IACvC,MAAMM,YAAY,AAACH,QAAmB;IACtC,MAAMI,YAAYD,UAAUE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACzD,MAAMC,aAAa,CAAC,EAAEJ,UAAU,OAAO,CAAC;IAExC,MAAM,EAAEK,QAAQ,EAAE,GAAGf,SAAkB;QAAEM,MAAMQ;IAAW;IAE1D,MAAME,cAAcd,YAAY;QAC9BM,WAAW;QAEX,MAAMS,aAAa,IAAIC;QACvB,MAAMC,YAAYC,WAAW,IAAMH,WAAWI,KAAK,IAAI,OAAO,cAAc;;QAE5E,IAAI;YACF,oEAAoE;YACpE,MAAMC,WAAW,MAAMC,MAAM,CAAC,IAAI,EAAEnB,iCAAiC,CAAC,EAAE;gBACtEoB,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;gBACRC,QAAQT,WAAWS,MAAM;YAC3B;YAEAC,aAAaR;YAEb,IAAI,CAACG,SAASM,EAAE,EAAE;gBAChB,IAAIC,eAAe;gBACnB,IAAI;oBACF,MAAMC,QAAQ,MAAMR,SAASS,IAAI;oBACjCF,eAAeC,MAAME,OAAO,IAAIH;gBAClC,EAAE,OAAOI,GAAG;oBACV,2EAA2E;oBAC3EJ,eAAe,CAAC,MAAM,EAAEP,SAASY,MAAM,CAAC,EAAE,EAAEZ,SAASa,UAAU,CAAC,CAAC;gBACnE;gBACA,MAAM,IAAIC,MAAMP;YAClB;YAEA,MAAMQ,OAAO,MAAMf,SAASS,IAAI;YAChC,MAAMO,SAAkBD,KAAKC,MAAM,IAAI,EAAE;YAEzC,yCAAyC;YACzC,0EAA0E;YAC1EvB,SAASuB;YAETvC,MAAMwC,OAAO,CAAC,CAAC,qBAAqB,EAAED,OAAOE,MAAM,CAAC,QAAQ,CAAC;QAC/D,EAAE,OAAOV,OAAgB;YACvB,MAAMW,MAAMX,iBAAiBM,QAAQN,MAAME,OAAO,GAAG;YACrD,IAAIF,iBAAiBM,SAASN,MAAMY,IAAI,KAAK,cAAc;gBACzD3C,MAAM+B,KAAK,CAAC;YACd,OAAO;gBACL/B,MAAM+B,KAAK,CAAC,CAAC,OAAO,EAAEW,IAAI,CAAC;YAC7B;QACF,SAAU;YACRjC,WAAW;YACXmB,aAAaR;QACf;IACF,GAAG;QAACJ;KAAS;IAEb,qBACE,MAAC4B;QAAIC,OAAO;YAAEC,cAAc;QAAO;;0BACjC,KAAC/C;gBAAOgD,aAAY;gBAAYC,UAAUxC;gBAASyC,QAAQ;gBAAOC,SAASjC;gBAAakC,MAAK;0BAC1F3C,UAAU,uBAAuB;;0BAEpC,KAAC4C;gBAAEP,OAAO;oBAAEQ,OAAO;oBAA8BC,UAAU;oBAAQC,WAAW;gBAAM;0BAAG;;;;AAM7F,EAAC"}

package/dist/ui/hooks/useAISettings.d.ts

@@ -0,0 +1,26 @@
+import type { AISettingsData } from '../../ai/providers/types.js';
+/**
+ * Shared hook for fetching AI settings from `/api/globals/ai-providers`.
+ *
+ * Features:
+ * - Module-level cache to prevent redundant fetches across components
+ * - Deduplicates in-flight requests (if 3 components mount at once, only 1 fetch fires)
+ * - Optional `depth` parameter for controlling response depth
+ *
+ * @example
+ * ```ts
+ * const { data, isLoading } = useAISettings()
+ * const providers = data?.providers ?? []
+ * ```
+ */
+export declare function useAISettings(options?: {
+    depth?: number;
+}): {
+    data: AISettingsData | null;
+    isLoading: boolean;
+};
+/**
+ * Invalidate the cached AI settings, forcing the next `useAISettings` call to re-fetch.
+ * Useful after saving settings.
+ */
+export declare function invalidateAISettings(): void;