@websolutespa/payload-plugin-bowl-llm/dist/components/LlmModel/LlmModel.js

LLM plugin for Bowl PayloadCms plugin

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
import * as React from 'react';
export const LlmModel = ({ path })=>{
    const appKey = useFormFields(([fields])=>fields['settings.credentials.appKey']);
    const apiKey = useFormFields(([fields])=>fields['settings.credentials.apiKey']);
    const provider = useFormFields(([fields])=>fields['settings.llmConfig.provider']);
    const { value, setValue } = useField({
        path
    });
    const [options, setOptions] = React.useState([]);
    const appKeyValue = appKey?.initialValue;
    const apiKeyValue = apiKey?.initialValue;
    const providerValue = provider?.value;
    React.useEffect(()=>{
        const fetchOptions = async ()=>{
            try {
                setOptions([
                    {
                        label: 'Loading models ...',
                        value: ''
                    }
                ]);
                const response = await fetch((process.env.PAYLOAD_PUBLIC_BASE_PATH || '') + `/api/llm/${providerValue}/models?locale=it`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    referrer: '',
                    body: JSON.stringify({
                        appKey: appKeyValue,
                        apiKey: apiKeyValue
                    })
                });
                if (response.ok) {
                    const models = await response.json();
                    const options = models.map((model)=>({
                            label: model.id,
                            value: model.id
                        })).sort((a, b)=>a.label.localeCompare(b.label));
                    setOptions(options);
                    if (value && options.length > 0 && !options.find((o)=>o.value === value)) {
                        setValue(options[0].value);
                    }
                } else {
                    setOptions([
                        {
                            label: (await response.json()).message,
                            value: ''
                        }
                    ]);
                }
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        if (appKeyValue && apiKeyValue && providerValue) {
            fetchOptions();
        } else {
            setOptions([
                {
                    label: 'Select a provider first',
                    value: ''
                }
            ]);
            setValue('');
        }
    }, [
        appKeyValue,
        apiKeyValue,
        providerValue
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "field-type select",
        children: [
            /*#__PURE__*/ _jsx("label", {
                className: "field-label",
                htmlFor: `field-${path}`.replace(/\./g, '__'),
                children: "Model"
            }),
            /*#__PURE__*/ _jsx(SelectInput, {
                path: path,
                name: path,
                options: options,
                value: value,
                onChange: (option)=>Array.isArray(option) ? null : setValue(option.value)
            })
        ]
    });
};

//# sourceMappingURL=LlmModel.js.map