@shipfox/client-agent 0.2.0

package/dist/components/custom-model-provider-form.js

@@ -0,0 +1,667 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '@shipfox/react-ui/badge';
+import { Button, IconButton } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@shipfox/react-ui/collapsible';
+import { FormField, FormFieldInput, fieldError } from '@shipfox/react-ui/form-field';
+import { ModalBody, ModalFooter } from '@shipfox/react-ui/modal';
+import { Switch } from '@shipfox/react-ui/switch';
+import { Text } from '@shipfox/react-ui/typography';
+import { useForm } from '@tanstack/react-form';
+import { useEffect, useRef, useState } from 'react';
+import { useCreateCustomModelProviderMutation, useDiscoverCustomModelProviderModelsBySlugMutation, useDiscoverCustomModelProviderModelsMutation, useUpdateCustomModelProviderMutation } from '#hooks/api/model-providers.js';
+import { MODEL_PROVIDER_API_OPTIONS } from './custom-model-provider-api-options.js';
+import { buildCreateCustomModelProviderBody, buildDiscoverModelsBody, buildDiscoverModelsBySlugBody, buildUpdateCustomModelProviderBody, createCustomModelProviderFormValues, createFormRowId, editCustomModelProviderFormValues } from './custom-model-provider-payload.js';
+import { customModelProviderSlugError, deriveCustomModelProviderSlug } from './custom-model-provider-slug.js';
+import { FormFieldSelect } from './default-model-field.js';
+import { modelProviderConfigErrorField } from './form-errors.js';
+export const CUSTOM_MODEL_PROVIDER_FORM_ID = 'custom-model-provider-form';
+export function CustomModelProviderForm({ workspaceId, existingConfig, onSaved }) {
+    const createMutation = useCreateCustomModelProviderMutation();
+    const updateMutation = useUpdateCustomModelProviderMutation();
+    const discoverMutation = useDiscoverCustomModelProviderModelsMutation();
+    const discoverBySlugMutation = useDiscoverCustomModelProviderModelsBySlugMutation();
+    const [slugEdited, setSlugEdited] = useState(existingConfig !== undefined);
+    const [formError, setFormError] = useState();
+    const [discoveryStatus, setDiscoveryStatus] = useState();
+    const [removedDefaultNotice, setRemovedDefaultNotice] = useState(false);
+    const mountedRef = useRef(true);
+    const form = useForm({
+        defaultValues: existingConfig ? editCustomModelProviderFormValues(existingConfig) : createCustomModelProviderFormValues(),
+        onSubmit: async ({ value })=>{
+            setFormError(undefined);
+            try {
+                if (existingConfig) {
+                    await updateMutation.mutateAsync({
+                        workspaceId,
+                        providerId: existingConfig.provider_id,
+                        body: buildUpdateCustomModelProviderBody(existingConfig, value)
+                    });
+                } else {
+                    await createMutation.mutateAsync({
+                        workspaceId,
+                        body: buildCreateCustomModelProviderBody(value)
+                    });
+                }
+                onSaved();
+            } catch (error) {
+                applyServerError(error);
+            }
+        }
+    });
+    const isPending = createMutation.isPending || updateMutation.isPending || discoverMutation.isPending || discoverBySlugMutation.isPending;
+    useEffect(()=>{
+        return ()=>{
+            mountedRef.current = false;
+        };
+    }, []);
+    async function handleDiscoverModels(values) {
+        setDiscoveryStatus(undefined);
+        try {
+            const response = existingConfig ? await discoverBySlugMutation.mutateAsync({
+                workspaceId,
+                providerId: existingConfig.provider_id,
+                body: buildDiscoverModelsBySlugBody(existingConfig, values)
+            }) : await discoverMutation.mutateAsync({
+                workspaceId,
+                body: buildDiscoverModelsBody(values)
+            });
+            if (!mountedRef.current) return;
+            const existingIds = new Set(values.models.map((model)=>model.id.trim()).filter(Boolean));
+            const discovered = response.models.filter((model)=>!existingIds.has(model.id));
+            form.setFieldValue('models', [
+                ...values.models,
+                ...discovered.map((model)=>({
+                        client_id: createFormRowId(),
+                        id: model.id,
+                        label: model.label,
+                        context_window: '',
+                        max_output_tokens: '',
+                        input_image: false,
+                        reasoning: false
+                    }))
+            ]);
+            setDiscoveryStatus(discovered.length > 0 ? `Discovered ${discovered.length} models.` : 'No models found - that is normal for some servers. Add models manually.');
+        } catch (error) {
+            if (!mountedRef.current) return;
+            applyServerError(error);
+        }
+    }
+    function applyServerError(error) {
+        const mapped = modelProviderConfigErrorField(error);
+        if (mapped.kind === 'field') {
+            form.setFieldMeta(mapped.field, (prev)=>({
+                    ...prev,
+                    errorMap: {
+                        ...prev.errorMap,
+                        onServer: mapped.message
+                    }
+                }));
+            return;
+        }
+        setFormError(mapped.message);
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(ModalBody, {
+                className: "min-h-0 flex-1 gap-0 overflow-y-auto overflow-x-clip scrollbar",
+                children: [
+                    /*#__PURE__*/ _jsx("form", {
+                        id: CUSTOM_MODEL_PROVIDER_FORM_ID,
+                        className: "flex w-full flex-col gap-24",
+                        noValidate: true,
+                        onSubmit: (event)=>{
+                            event.preventDefault();
+                            event.stopPropagation();
+                            void form.handleSubmit();
+                        },
+                        children: /*#__PURE__*/ _jsx(form.Subscribe, {
+                            selector: (state)=>state.values,
+                            children: (values)=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(FormGroup, {
+                                            title: "Provider",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "grid grid-cols-2 gap-12 max-[640px]:grid-cols-1",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(form.Field, {
+                                                            name: "display_name",
+                                                            validators: {
+                                                                onBlur: ({ value })=>value.trim() ? undefined : 'Display name is required.',
+                                                                onSubmit: ({ value })=>value.trim() ? undefined : 'Display name is required.'
+                                                            },
+                                                            children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                                    label: "Display name",
+                                                                    id: "custom-provider-display-name",
+                                                                    error: fieldError(field),
+                                                                    children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                                        value: field.state.value,
+                                                                        onChange: (event)=>{
+                                                                            const displayName = event.target.value;
+                                                                            field.handleChange(displayName);
+                                                                            if (!slugEdited && !existingConfig) {
+                                                                                form.setFieldValue('slug', deriveCustomModelProviderSlug(displayName));
+                                                                            }
+                                                                        },
+                                                                        onBlur: field.handleBlur
+                                                                    })
+                                                                })
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(form.Field, {
+                                                            name: "slug",
+                                                            validators: {
+                                                                onBlur: ({ value })=>existingConfig ? undefined : customModelProviderSlugError(value),
+                                                                onSubmit: ({ value })=>existingConfig ? undefined : customModelProviderSlugError(value)
+                                                            },
+                                                            children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                                    label: "Provider ID",
+                                                                    id: "custom-provider-slug",
+                                                                    error: fieldError(field),
+                                                                    description: "Use this ID in workflow files.",
+                                                                    children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                                        className: "font-code",
+                                                                        value: field.state.value,
+                                                                        disabled: existingConfig !== undefined,
+                                                                        onChange: (event)=>{
+                                                                            setSlugEdited(event.target.value.trim() !== '');
+                                                                            field.handleChange(event.target.value);
+                                                                        },
+                                                                        onBlur: field.handleBlur
+                                                                    })
+                                                                })
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "grid grid-cols-2 gap-12 max-[640px]:grid-cols-1",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(form.Field, {
+                                                            name: "api",
+                                                            children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                                    label: "Protocol",
+                                                                    id: "custom-provider-api",
+                                                                    children: /*#__PURE__*/ _jsx(FormFieldSelect, {
+                                                                        value: field.state.value,
+                                                                        onChange: (event)=>field.handleChange(event.target.value),
+                                                                        onBlur: field.handleBlur,
+                                                                        children: MODEL_PROVIDER_API_OPTIONS.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                                                                value: option.value,
+                                                                                children: option.label
+                                                                            }, option.value))
+                                                                    })
+                                                                })
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(form.Field, {
+                                                            name: "base_url",
+                                                            validators: {
+                                                                onBlur: ({ value })=>canParseUrl(value) ? undefined : 'Enter a full URL, like https://api.openai.com/v1',
+                                                                onSubmit: ({ value })=>canParseUrl(value) ? undefined : 'Enter a full URL, like https://api.openai.com/v1'
+                                                            },
+                                                            children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                                    label: "Base URL",
+                                                                    id: "custom-provider-base-url",
+                                                                    error: fieldError(field),
+                                                                    children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                                        className: "font-code",
+                                                                        placeholder: "https://api.openai.com/v1",
+                                                                        value: field.state.value,
+                                                                        onChange: (event)=>field.handleChange(event.target.value),
+                                                                        onBlur: field.handleBlur
+                                                                    })
+                                                                })
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx(form.Field, {
+                                                    name: "api_key",
+                                                    children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                            label: "API key",
+                                                            id: "custom-provider-api-key",
+                                                            description: existingConfig ? 'Leave blank to keep the current key.' : 'Leave blank when the endpoint does not require a key.',
+                                                            children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                                type: "password",
+                                                                autoComplete: "off",
+                                                                value: field.state.value,
+                                                                onChange: (event)=>field.handleChange(event.target.value),
+                                                                onBlur: field.handleBlur
+                                                            })
+                                                        })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormGroup, {
+                                            title: "Headers",
+                                            children: /*#__PURE__*/ _jsx(form.Field, {
+                                                name: "headers",
+                                                children: (field)=>/*#__PURE__*/ _jsx(HeaderRows, {
+                                                        rows: field.state.value,
+                                                        onChange: (headers)=>field.handleChange(headers)
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsxs(FormGroup, {
+                                            title: "Models",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex flex-wrap items-center justify-between gap-8",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            type: "button",
+                                                            size: "sm",
+                                                            variant: "secondary",
+                                                            iconLeft: "downloadLine",
+                                                            disabled: !canParseUrl(values.base_url),
+                                                            isLoading: discoverMutation.isPending || discoverBySlugMutation.isPending,
+                                                            onClick: ()=>{
+                                                                void handleDiscoverModels(values);
+                                                            },
+                                                            children: "Fetch models"
+                                                        }),
+                                                        discoveryStatus ? /*#__PURE__*/ _jsx(Text, {
+                                                            size: "sm",
+                                                            className: "text-foreground-neutral-muted",
+                                                            role: "status",
+                                                            children: discoveryStatus
+                                                        }) : null
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx(form.Field, {
+                                                    name: "models",
+                                                    validators: {
+                                                        onSubmit: ({ value })=>value.some((model)=>model.id.trim() && model.label.trim()) ? undefined : 'Add at least one model.'
+                                                    },
+                                                    children: (field)=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(ModelRows, {
+                                                                    rows: field.state.value,
+                                                                    defaultModel: values.default_model,
+                                                                    onDefaultRemoved: ()=>setRemovedDefaultNotice(true),
+                                                                    onChange: (models)=>field.handleChange(models),
+                                                                    onDefaultChange: (defaultModel)=>{
+                                                                        setRemovedDefaultNotice(false);
+                                                                        form.setFieldValue('default_model', defaultModel);
+                                                                    }
+                                                                }),
+                                                                fieldError(field) ? /*#__PURE__*/ _jsx(Text, {
+                                                                    size: "sm",
+                                                                    className: "text-foreground-highlight-error",
+                                                                    children: fieldError(field)
+                                                                }) : null
+                                                            ]
+                                                        })
+                                                }),
+                                                removedDefaultNotice ? /*#__PURE__*/ _jsx(Callout, {
+                                                    role: "alert",
+                                                    type: "warning",
+                                                    children: /*#__PURE__*/ _jsx(Text, {
+                                                        size: "sm",
+                                                        children: "Default model removed - choose a new default or keep none."
+                                                    })
+                                                }) : null,
+                                                /*#__PURE__*/ _jsx(form.Field, {
+                                                    name: "default_model",
+                                                    validators: {
+                                                        onBlur: ({ value })=>validateDefaultModel(value, values.models),
+                                                        onSubmit: ({ value })=>validateDefaultModel(value, values.models)
+                                                    },
+                                                    children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                                            label: "Default model",
+                                                            id: "custom-provider-default-model",
+                                                            error: fieldError(field),
+                                                            children: /*#__PURE__*/ _jsxs(FormFieldSelect, {
+                                                                value: field.state.value,
+                                                                onChange: (event)=>{
+                                                                    setRemovedDefaultNotice(false);
+                                                                    field.handleChange(event.target.value);
+                                                                },
+                                                                onBlur: field.handleBlur,
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("option", {
+                                                                        value: "",
+                                                                        children: "No default"
+                                                                    }),
+                                                                    values.models.filter((model)=>model.id.trim()).map((model)=>/*#__PURE__*/ _jsx("option", {
+                                                                            value: model.id,
+                                                                            children: model.label.trim() || model.id
+                                                                        }, model.client_id))
+                                                                ]
+                                                            })
+                                                        })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                        })
+                    }),
+                    formError ? /*#__PURE__*/ _jsx(Callout, {
+                        role: "alert",
+                        type: "error",
+                        className: "mt-16",
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    bold: true,
+                                    children: "Could not save provider"
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    children: formError
+                                })
+                            ]
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(ModalFooter, {
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        size: "sm",
+                        className: "mr-auto text-foreground-neutral-muted",
+                        children: "Saving runs a live test against the endpoint."
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        form: CUSTOM_MODEL_PROVIDER_FORM_ID,
+                        isLoading: isPending,
+                        children: "Test & save"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function FormGroup({ title, children }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "flex flex-col gap-16 border-t border-border-neutral-base pt-16 first:border-t-0 first:pt-0",
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: "xs",
+                className: "font-medium uppercase text-foreground-neutral-muted",
+                children: title
+            }),
+            children
+        ]
+    });
+}
+function HeaderRows({ rows, onChange }) {
+    const addButtonRef = useRef(null);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-10",
+        children: [
+            rows.map((row, index)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "grid grid-cols-[1fr_1fr_auto_auto] items-end gap-x-8 gap-y-4 max-[760px]:grid-cols-1",
+                    children: [
+                        /*#__PURE__*/ _jsx(FormField, {
+                            label: "Name",
+                            id: `custom-header-name-${row.client_id}`,
+                            children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                className: "font-code",
+                                value: row.name,
+                                onChange: (event)=>updateRow(rows, index, {
+                                        ...row,
+                                        name: event.target.value
+                                    }, onChange)
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(FormField, {
+                            label: "Value",
+                            id: `custom-header-value-${row.client_id}`,
+                            children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                type: row.secret ? 'password' : 'text',
+                                placeholder: row.hasStoredValue ? 'Unchanged' : undefined,
+                                value: row.value,
+                                onChange: (event)=>updateRow(rows, index, {
+                                        ...row,
+                                        value: event.target.value
+                                    }, onChange)
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex h-32 items-center gap-8 text-sm text-foreground-neutral-muted",
+                            children: [
+                                /*#__PURE__*/ _jsx(Switch, {
+                                    size: "sm",
+                                    "aria-label": `Mark header ${index + 1} as secret`,
+                                    checked: row.secret,
+                                    onCheckedChange: (checked)=>updateRow(rows, index, {
+                                            ...row,
+                                            secret: checked
+                                        }, onChange)
+                                }),
+                                "Secret"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            type: "button",
+                            size: "sm",
+                            variant: "transparent",
+                            icon: "deleteBinLine",
+                            "aria-label": "Remove header",
+                            onClick: ()=>{
+                                onChange(rows.filter((_, rowIndex)=>rowIndex !== index));
+                                focusAfterRender(addButtonRef);
+                            }
+                        })
+                    ]
+                }, row.client_id)),
+            /*#__PURE__*/ _jsx(Button, {
+                ref: addButtonRef,
+                type: "button",
+                size: "sm",
+                variant: "secondary",
+                iconLeft: "addLine",
+                onClick: ()=>{
+                    const clientId = createFormRowId();
+                    onChange([
+                        ...rows,
+                        {
+                            client_id: clientId,
+                            name: '',
+                            value: '',
+                            secret: false,
+                            hasStoredValue: false,
+                            storedName: ''
+                        }
+                    ]);
+                    focusAfterRender(`custom-header-name-${clientId}`);
+                },
+                children: "Add header"
+            })
+        ]
+    });
+}
+function ModelRows({ rows, defaultModel, onChange, onDefaultChange, onDefaultRemoved }) {
+    const addButtonRef = useRef(null);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-10",
+        children: [
+            rows.map((row, index)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "rounded-8 border border-border-neutral-base p-12",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "grid grid-cols-[1fr_1fr_auto] items-end gap-8 max-[760px]:grid-cols-1",
+                            children: [
+                                /*#__PURE__*/ _jsx(FormField, {
+                                    label: "Model id",
+                                    id: `custom-model-id-${row.client_id}`,
+                                    children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                        className: "font-code",
+                                        value: row.id,
+                                        onChange: (event)=>updateRow(rows, index, {
+                                                ...row,
+                                                id: event.target.value
+                                            }, onChange)
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormField, {
+                                    label: "Label",
+                                    id: `custom-model-label-${row.client_id}`,
+                                    children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                        value: row.label,
+                                        onChange: (event)=>updateRow(rows, index, {
+                                                ...row,
+                                                label: event.target.value
+                                            }, onChange)
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-8",
+                                    children: [
+                                        defaultModel && row.id === defaultModel ? /*#__PURE__*/ _jsx(Badge, {
+                                            variant: "neutral",
+                                            children: "Default"
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            type: "button",
+                                            size: "sm",
+                                            variant: "transparent",
+                                            icon: "deleteBinLine",
+                                            "aria-label": "Remove model",
+                                            onClick: ()=>{
+                                                const nextRows = rows.filter((_, rowIndex)=>rowIndex !== index);
+                                                onChange(nextRows);
+                                                focusAfterRender(addButtonRef);
+                                                if (row.id === defaultModel) {
+                                                    onDefaultChange('');
+                                                    onDefaultRemoved();
+                                                }
+                                            }
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Collapsible, {
+                            children: [
+                                /*#__PURE__*/ _jsx(CollapsibleTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        type: "button",
+                                        size: "sm",
+                                        variant: "transparentMuted",
+                                        className: "mt-8",
+                                        children: "Defaults: 128k context, 16k output, text-only"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(CollapsibleContent, {
+                                    children: /*#__PURE__*/ _jsxs("div", {
+                                        className: "mt-8 grid grid-cols-2 gap-8 max-[640px]:grid-cols-1",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(FormField, {
+                                                label: "Context window",
+                                                id: `custom-model-context-${row.client_id}`,
+                                                children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                    type: "number",
+                                                    inputMode: "numeric",
+                                                    placeholder: "128000",
+                                                    value: row.context_window,
+                                                    onChange: (event)=>updateRow(rows, index, {
+                                                            ...row,
+                                                            context_window: event.target.value
+                                                        }, onChange)
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(FormField, {
+                                                label: "Max output tokens",
+                                                id: `custom-model-output-${row.client_id}`,
+                                                children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                    type: "number",
+                                                    inputMode: "numeric",
+                                                    placeholder: "16384",
+                                                    value: row.max_output_tokens,
+                                                    onChange: (event)=>updateRow(rows, index, {
+                                                            ...row,
+                                                            max_output_tokens: event.target.value
+                                                        }, onChange)
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex h-32 items-center gap-8 text-sm text-foreground-neutral-muted",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Switch, {
+                                                        size: "sm",
+                                                        "aria-label": `Enable image input for model ${index + 1}`,
+                                                        checked: row.input_image,
+                                                        onCheckedChange: (checked)=>updateRow(rows, index, {
+                                                                ...row,
+                                                                input_image: checked
+                                                            }, onChange)
+                                                    }),
+                                                    "Image input"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex h-32 items-center gap-8 text-sm text-foreground-neutral-muted",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Switch, {
+                                                        size: "sm",
+                                                        "aria-label": `Enable reasoning for model ${index + 1}`,
+                                                        checked: row.reasoning,
+                                                        onCheckedChange: (checked)=>updateRow(rows, index, {
+                                                                ...row,
+                                                                reasoning: checked
+                                                            }, onChange)
+                                                    }),
+                                                    "Reasoning"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }, row.client_id)),
+            /*#__PURE__*/ _jsx(Button, {
+                ref: addButtonRef,
+                type: "button",
+                size: "sm",
+                variant: "secondary",
+                iconLeft: "addLine",
+                onClick: ()=>{
+                    const clientId = createFormRowId();
+                    onChange([
+                        ...rows,
+                        {
+                            client_id: clientId,
+                            id: '',
+                            label: '',
+                            context_window: '',
+                            max_output_tokens: '',
+                            input_image: false,
+                            reasoning: false
+                        }
+                    ]);
+                    focusAfterRender(`custom-model-id-${clientId}`);
+                },
+                children: "Add model"
+            })
+        ]
+    });
+}
+function updateRow(rows, index, row, onChange) {
+    onChange(rows.map((candidate, rowIndex)=>rowIndex === index ? row : candidate));
+}
+function focusAfterRender(target) {
+    requestAnimationFrame(()=>{
+        const element = typeof target === 'string' ? document.getElementById(target) : target.current;
+        element?.focus();
+    });
+}
+function validateDefaultModel(value, models) {
+    return value.trim() && !models.some((model)=>model.id.trim() === value.trim()) ? 'Choose a model from the models list.' : undefined;
+}
+function canParseUrl(value) {
+    try {
+        new URL(value);
+        return true;
+    } catch  {
+        return false;
+    }
+}
+
+//# sourceMappingURL=custom-model-provider-form.js.map