@shipfox/client-agent 0.2.0

package/dist/components/model-providers-section.js

@@ -0,0 +1,668 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { QueryLoadError } from '@shipfox/client-ui';
+import { Button, IconButton } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@shipfox/react-ui/dropdown-menu';
+import { EmptyState } from '@shipfox/react-ui/empty-state';
+import { Icon } from '@shipfox/react-ui/icon';
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle } from '@shipfox/react-ui/modal';
+import { Skeleton } from '@shipfox/react-ui/skeleton';
+import { toast } from '@shipfox/react-ui/toast';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@shipfox/react-ui/tooltip';
+import { Header, Text } from '@shipfox/react-ui/typography';
+import { cn } from '@shipfox/react-ui/utils';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useDeleteModelProviderConfigMutation, useModelProviderCatalogQuery, useModelProviderConfigsQuery, useSetDefaultModelProviderMutation } from '#hooks/api/model-providers.js';
+import { AddCustomProviderCard } from './add-custom-provider-card.js';
+import { AvailableProvidersGrid, PROVIDER_GRID_CLASS } from './available-providers-grid.js';
+import { ChangeDefaultModelForm } from './change-default-model-form.js';
+import { CustomModelProviderForm } from './custom-model-provider-form.js';
+import { modelProviderConfigErrorToFormError } from './form-errors.js';
+import { ModelProviderUsageModal } from './model-provider-usage-modal.js';
+import { usageTargetFromCatalogEntry, usageTargetFromCustomConfig } from './model-provider-usage-target.js';
+import { customProviderCardMatchesSearch } from './provider-search.js';
+import { isSupportedCatalogEntry, toSupportedCatalogEntry } from './supported-model-provider-catalog-entry.js';
+import { ModelProviderTestAndSaveForm } from './test-and-save-form.js';
+const SURFACE_CLASS = 'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
+const USAGE_MODAL_OPEN_DELAY_MS = 250;
+export function WorkspaceModelProvidersSection({ workspaceId }) {
+    const catalogQuery = useModelProviderCatalogQuery();
+    const configsQuery = useModelProviderConfigsQuery(workspaceId);
+    const [formState, setFormState] = useState(null);
+    const [customFormState, setCustomFormState] = useState(null);
+    const [modelFormState, setModelFormState] = useState(null);
+    const [usageTarget, setUsageTarget] = useState(null);
+    const [pendingUsageTarget, setPendingUsageTarget] = useState(null);
+    const configuredProvidersRegionRef = useRef(null);
+    const providers = catalogQuery.data?.providers ?? [];
+    const configs = configsQuery.data?.configs ?? [];
+    const configsLoaded = configsQuery.data !== undefined;
+    const defaultProviderId = configsQuery.data?.default_provider_id ?? null;
+    const providerById = useMemo(()=>new Map(providers.map((provider)=>[
+                provider.id,
+                provider
+            ])), [
+        providers
+    ]);
+    const configuredIds = useMemo(()=>new Set(configs.map((config)=>config.provider_id)), [
+        configs
+    ]);
+    const availableProviders = configsLoaded ? providers.filter((provider)=>isSupportedCatalogEntry(provider) && !configuredIds.has(provider.id)) : [];
+    const unsupportedProviders = providers.filter((provider)=>provider.support_status === 'unsupported');
+    function closeForm() {
+        setFormState(null);
+    }
+    function closeModelForm() {
+        setModelFormState(null);
+    }
+    function closeCustomForm() {
+        setCustomFormState(null);
+    }
+    useEffect(()=>{
+        if (pendingUsageTarget === null || formState !== null || customFormState !== null) return undefined;
+        const timer = window.setTimeout(()=>{
+            setUsageTarget(pendingUsageTarget);
+            setPendingUsageTarget(null);
+        }, USAGE_MODAL_OPEN_DELAY_MS);
+        return ()=>window.clearTimeout(timer);
+    }, [
+        customFormState,
+        formState,
+        pendingUsageTarget
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex min-w-0 flex-col gap-32",
+        children: [
+            /*#__PURE__*/ _jsxs("section", {
+                ref: configuredProvidersRegionRef,
+                className: "flex flex-col gap-16 outline-none",
+                "aria-label": "Configured providers",
+                tabIndex: -1,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Header, {
+                                variant: "h3",
+                                children: "Configured providers"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                className: "text-foreground-neutral-muted",
+                                children: "Workspace credentials available to agent steps."
+                            })
+                        ]
+                    }),
+                    configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
+                        label: "Loading configured providers"
+                    }) : null,
+                    configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx("div", {
+                        className: cn(SURFACE_CLASS, 'px-16'),
+                        children: /*#__PURE__*/ _jsx(QueryLoadError, {
+                            query: configsQuery,
+                            subject: "model provider configs"
+                        })
+                    }) : null,
+                    configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                        className: cn(SURFACE_CLASS, 'px-16'),
+                        children: /*#__PURE__*/ _jsx(EmptyState, {
+                            icon: "key2Line",
+                            title: "No providers configured",
+                            description: "Configure a provider below to run agent steps with workspace-managed credentials."
+                        })
+                    }) : null,
+                    configs.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                        className: cn('divide-y divide-border-neutral-base', SURFACE_CLASS),
+                        children: configs.map((config)=>{
+                            const entry = toSupportedCatalogEntry(providerById.get(config.provider_id));
+                            const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
+                            const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
+                            return /*#__PURE__*/ _jsx(ConfiguredProviderRow, {
+                                workspaceId: workspaceId,
+                                config: config,
+                                entry: entry,
+                                isDefault: config.provider_id === defaultProviderId,
+                                onEdit: ()=>{
+                                    if (entry && builtinConfig) {
+                                        setFormState({
+                                            mode: 'edit',
+                                            entry,
+                                            config: builtinConfig
+                                        });
+                                    } else if (customConfig) {
+                                        setCustomFormState({
+                                            mode: 'edit',
+                                            config: customConfig
+                                        });
+                                    }
+                                },
+                                onChangeDefaultModel: ()=>{
+                                    if (entry && builtinConfig) setModelFormState({
+                                        entry,
+                                        config: builtinConfig
+                                    });
+                                },
+                                onShowUsage: ()=>{
+                                    if (entry && builtinConfig) {
+                                        setPendingUsageTarget(null);
+                                        setUsageTarget({
+                                            target: usageTargetFromCatalogEntry(entry),
+                                            initialModel: builtinConfig.default_model,
+                                            restoreFocusToConfiguredProviders: false
+                                        });
+                                    } else if (customConfig) {
+                                        setPendingUsageTarget(null);
+                                        setUsageTarget({
+                                            target: usageTargetFromCustomConfig(customConfig),
+                                            initialModel: customConfig.default_model,
+                                            restoreFocusToConfiguredProviders: false
+                                        });
+                                    }
+                                }
+                            }, config.provider_id);
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-16",
+                "aria-label": "Available providers",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Header, {
+                                variant: "h3",
+                                children: "Available providers"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                className: "text-foreground-neutral-muted",
+                                children: "Providers that can be configured for agent steps in this workspace."
+                            })
+                        ]
+                    }),
+                    catalogQuery.isPending || configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderGridSkeleton, {}) : null,
+                    catalogQuery.isError && catalogQuery.data === undefined ? /*#__PURE__*/ _jsx("div", {
+                        className: cn(SURFACE_CLASS, 'px-16'),
+                        children: /*#__PURE__*/ _jsx(QueryLoadError, {
+                            query: catalogQuery,
+                            subject: "model provider catalog"
+                        })
+                    }) : null,
+                    configsLoaded ? /*#__PURE__*/ _jsx(AvailableProvidersGrid, {
+                        entries: availableProviders,
+                        onSelect: (entry)=>setFormState({
+                                mode: 'configure',
+                                entry
+                            }),
+                        trailingCard: /*#__PURE__*/ _jsx(AddCustomProviderCard, {
+                            onConfigure: ()=>setCustomFormState({
+                                    mode: 'create'
+                                })
+                        }),
+                        trailingCardMatchesSearch: customProviderCardMatchesSearch
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-16",
+                "aria-label": "Unsupported providers",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Header, {
+                                variant: "h3",
+                                children: "Unsupported providers"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                className: "text-foreground-neutral-muted",
+                                children: "Providers that cannot be configured in this workspace yet."
+                            })
+                        ]
+                    }),
+                    catalogQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
+                        label: "Loading unsupported providers"
+                    }) : null,
+                    unsupportedProviders.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                        className: cn('divide-y divide-border-neutral-base', SURFACE_CLASS),
+                        children: unsupportedProviders.map((entry)=>/*#__PURE__*/ _jsxs("li", {
+                                className: "flex items-start gap-12 px-16 py-12 opacity-70",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Icon, {
+                                        name: "forbid2Line",
+                                        className: "mt-2 size-18 shrink-0 text-foreground-neutral-muted",
+                                        "aria-hidden": true
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex min-w-0 flex-1 flex-col gap-2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "md",
+                                                bold: true,
+                                                className: "truncate",
+                                                children: entry.label
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "sm",
+                                                className: "text-foreground-neutral-muted",
+                                                children: entry.unsupported_reason
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, entry.id))
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Modal, {
+                open: formState !== null,
+                onOpenChange: (open)=>open ? undefined : closeForm(),
+                children: /*#__PURE__*/ _jsxs(ModalContent, {
+                    "aria-describedby": undefined,
+                    children: [
+                        /*#__PURE__*/ _jsx(ModalTitle, {
+                            className: "sr-only",
+                            children: modelProviderFormTitle(formState)
+                        }),
+                        /*#__PURE__*/ _jsx(ModalHeader, {
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                size: "lg",
+                                "aria-hidden": "true",
+                                className: "overflow-ellipsis overflow-hidden whitespace-nowrap",
+                                children: modelProviderFormTitle(formState)
+                            })
+                        }),
+                        formState ? /*#__PURE__*/ _jsx(ModelProviderTestAndSaveForm, {
+                            workspaceId: workspaceId,
+                            entry: formState.entry,
+                            existingConfig: formState.config,
+                            onSaved: (savedDefaultModel)=>{
+                                toast.success(`${formState.entry.label} saved`);
+                                if (formState.mode === 'configure' && configs.length === 0) {
+                                    setPendingUsageTarget({
+                                        target: usageTargetFromCatalogEntry(formState.entry),
+                                        initialModel: savedDefaultModel,
+                                        restoreFocusToConfiguredProviders: true
+                                    });
+                                }
+                                closeForm();
+                            }
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Modal, {
+                open: modelFormState !== null,
+                onOpenChange: (open)=>open ? undefined : closeModelForm(),
+                children: /*#__PURE__*/ _jsxs(ModalContent, {
+                    "aria-describedby": undefined,
+                    children: [
+                        /*#__PURE__*/ _jsx(ModalTitle, {
+                            className: "sr-only",
+                            children: "Change default model"
+                        }),
+                        /*#__PURE__*/ _jsx(ModalHeader, {
+                            children: /*#__PURE__*/ _jsxs(Text, {
+                                size: "lg",
+                                "aria-hidden": "true",
+                                className: "overflow-ellipsis overflow-hidden whitespace-nowrap",
+                                children: [
+                                    "Change default model for ",
+                                    modelFormState?.entry.label
+                                ]
+                            })
+                        }),
+                        modelFormState ? /*#__PURE__*/ _jsx(ChangeDefaultModelForm, {
+                            workspaceId: workspaceId,
+                            entry: modelFormState.entry,
+                            config: modelFormState.config,
+                            onSaved: ()=>{
+                                toast.success(`${modelFormState.entry.label} default model saved`);
+                                closeModelForm();
+                            }
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(ModelProviderUsageModal, {
+                target: usageTarget?.target ?? null,
+                initialModel: usageTarget?.initialModel ?? null,
+                workspaceDefaultHarnessId: configsQuery.data?.default_harness_id ?? null,
+                open: usageTarget !== null,
+                closeFocusTarget: usageTarget?.restoreFocusToConfiguredProviders ? configuredProvidersRegionRef.current : null,
+                onOpenChange: (open)=>{
+                    if (!open) setUsageTarget(null);
+                }
+            }),
+            /*#__PURE__*/ _jsx(Modal, {
+                open: customFormState !== null,
+                onOpenChange: (open)=>open ? undefined : closeCustomForm(),
+                children: /*#__PURE__*/ _jsxs(ModalContent, {
+                    "aria-describedby": undefined,
+                    className: "max-h-[calc(100vh-32px)] max-w-[760px]",
+                    children: [
+                        /*#__PURE__*/ _jsx(ModalTitle, {
+                            className: "sr-only",
+                            children: customModelProviderFormTitle(customFormState)
+                        }),
+                        /*#__PURE__*/ _jsx(ModalHeader, {
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex min-w-0 flex-col gap-2",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "lg",
+                                        "aria-hidden": "true",
+                                        className: "truncate",
+                                        children: customModelProviderFormTitle(customFormState)
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-muted",
+                                        children: "Connect an OpenAI-, Anthropic-, or Gemini-compatible endpoint."
+                                    })
+                                ]
+                            })
+                        }),
+                        customFormState ? /*#__PURE__*/ _jsx(CustomModelProviderForm, {
+                            workspaceId: workspaceId,
+                            existingConfig: customFormState.mode === 'edit' ? customFormState.config : undefined,
+                            onSaved: ()=>{
+                                toast.success(customFormState.mode === 'edit' ? `${customFormState.config.display_name} saved` : 'Custom provider saved');
+                                closeCustomForm();
+                            }
+                        }) : null
+                    ]
+                })
+            })
+        ]
+    });
+}
+function modelProviderFormTitle(formState) {
+    if (formState === null) return '';
+    if (formState.mode === 'edit') return `Edit credentials for ${formState.entry.label}`;
+    return `Configure ${formState.entry.label}`;
+}
+function customModelProviderFormTitle(formState) {
+    if (formState === null) return '';
+    if (formState.mode === 'edit') return `Edit ${formState.config.display_name}`;
+    return 'Add custom provider';
+}
+function isBuiltinModelProviderConfig(config) {
+    return config.kind === 'builtin';
+}
+function isCustomModelProviderConfig(config) {
+    return config.kind === 'custom';
+}
+function ConfiguredProviderRow({ workspaceId, config, entry, isDefault, onEdit, onChangeDefaultModel, onShowUsage }) {
+    const setDefault = useSetDefaultModelProviderMutation();
+    const deleteConfig = useDeleteModelProviderConfigMutation();
+    const [defaultError, setDefaultError] = useState();
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [deleteError, setDeleteError] = useState();
+    const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
+    const label = customConfig?.display_name ?? entry?.label ?? config.provider_id;
+    const canUse = entry !== undefined || customConfig !== undefined;
+    const canEdit = entry !== undefined || customConfig !== undefined;
+    const isBuiltinConfig = isBuiltinModelProviderConfig(config);
+    async function handleSetDefault() {
+        setDefaultError(undefined);
+        try {
+            await setDefault.mutateAsync({
+                workspaceId,
+                body: {
+                    provider_id: config.provider_id
+                }
+            });
+            toast.success(`${label} is now the default provider`);
+        } catch (error) {
+            const mapped = modelProviderConfigErrorToFormError(error);
+            setDefaultError(mapped.message);
+        }
+    }
+    async function handleDelete() {
+        setDeleteError(undefined);
+        try {
+            await deleteConfig.mutateAsync({
+                workspaceId,
+                providerId: config.provider_id
+            });
+            toast.success(`${label} deleted`);
+            setDeleteOpen(false);
+        } catch (error) {
+            const mapped = modelProviderConfigErrorToFormError(error);
+            setDeleteError(mapped.message);
+        }
+    }
+    function handleDeleteOpenChange(nextOpen) {
+        setDeleteOpen(nextOpen);
+        if (nextOpen) {
+            setDeleteError(undefined);
+            deleteConfig.reset();
+        }
+    }
+    return /*#__PURE__*/ _jsxs("li", {
+        className: "flex flex-col gap-10 px-16 py-12 transition-colors hover:bg-background-components-hover",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between gap-12",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex min-w-0 items-center gap-8",
+                        children: [
+                            isDefault ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Tooltip, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                asChild: true,
+                                                children: /*#__PURE__*/ _jsx("span", {
+                                                    className: "inline-flex size-16 shrink-0 items-center justify-center",
+                                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                                        name: "starLine",
+                                                        className: "size-16 text-foreground-neutral-muted",
+                                                        "aria-hidden": true
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TooltipContent, {
+                                                children: "Default provider"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "sr-only",
+                                        children: "Default provider"
+                                    })
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "md",
+                                bold: true,
+                                className: "truncate",
+                                children: label
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "sm",
+                                    variant: "transparent",
+                                    icon: "more2Line",
+                                    "aria-label": `Open ${label} provider actions`
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                                align: "end",
+                                children: [
+                                    !isDefault ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "starLine",
+                                        disabled: setDefault.isPending || !entry && !customConfig,
+                                        onSelect: ()=>{
+                                            void handleSetDefault();
+                                        },
+                                        children: "Set as default"
+                                    }) : null,
+                                    isBuiltinConfig ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "settings3Line",
+                                        disabled: !entry,
+                                        onSelect: onChangeDefaultModel,
+                                        children: "Change default model"
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "bookOpenLine",
+                                        disabled: !canUse,
+                                        onSelect: onShowUsage,
+                                        children: "View workflow example"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "editLine",
+                                        disabled: !canEdit,
+                                        onSelect: onEdit,
+                                        children: customConfig ? 'Edit' : 'Edit credentials'
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "deleteBinLine",
+                                        onSelect: ()=>{
+                                            setDeleteOpen(true);
+                                        },
+                                        children: "Delete"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            defaultError ? /*#__PURE__*/ _jsx(Callout, {
+                role: "alert",
+                type: "error",
+                children: /*#__PURE__*/ _jsx(Text, {
+                    size: "sm",
+                    children: defaultError
+                })
+            }) : null,
+            /*#__PURE__*/ _jsx(DeleteModelProviderDialog, {
+                open: deleteOpen,
+                onOpenChange: handleDeleteOpenChange,
+                label: label,
+                errorMessage: deleteError,
+                isLoading: deleteConfig.isPending,
+                onDelete: handleDelete
+            })
+        ]
+    });
+}
+function DeleteModelProviderDialog({ open, onOpenChange, label, errorMessage, isLoading, onDelete }) {
+    return /*#__PURE__*/ _jsx(Modal, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ _jsxs(ModalContent, {
+            "aria-describedby": undefined,
+            className: "max-w-[420px]",
+            children: [
+                /*#__PURE__*/ _jsx(ModalTitle, {
+                    className: "sr-only",
+                    children: "Delete model provider"
+                }),
+                /*#__PURE__*/ _jsx(ModalHeader, {
+                    title: "Delete model provider"
+                }),
+                /*#__PURE__*/ _jsxs(ModalBody, {
+                    className: "gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Text, {
+                            size: "sm",
+                            className: "text-foreground-neutral-muted",
+                            children: [
+                                "Delete ",
+                                label,
+                                " credentials from this workspace? Agent jobs cannot use this provider until it is configured again."
+                            ]
+                        }),
+                        errorMessage ? /*#__PURE__*/ _jsx(Callout, {
+                            role: "alert",
+                            type: "error",
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                children: errorMessage
+                            })
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(ModalFooter, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "sm",
+                            variant: "secondary",
+                            onClick: ()=>onOpenChange(false),
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "sm",
+                            variant: "danger",
+                            isLoading: isLoading,
+                            onClick: onDelete,
+                            children: "Delete"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function ModelProviderRowsSkeleton({ label }) {
+    return /*#__PURE__*/ _jsx("ul", {
+        role: "status",
+        "aria-label": label,
+        className: cn('divide-y divide-border-neutral-base', SURFACE_CLASS),
+        children: [
+            0,
+            1,
+            2
+        ].map((row)=>/*#__PURE__*/ _jsxs("li", {
+                className: "flex items-center gap-12 px-16 py-12",
+                children: [
+                    /*#__PURE__*/ _jsx(Skeleton, {
+                        className: "size-32 shrink-0"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex min-w-0 flex-1 flex-col gap-6",
+                        children: [
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-16 w-120"
+                            }),
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-14 w-180"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Skeleton, {
+                        className: "h-28 w-96 shrink-0"
+                    })
+                ]
+            }, row))
+    });
+}
+function ModelProviderGridSkeleton() {
+    return /*#__PURE__*/ _jsx("div", {
+        role: "status",
+        "aria-label": "Loading available providers",
+        className: PROVIDER_GRID_CLASS,
+        children: [
+            0,
+            1,
+            2,
+            3
+        ].map((card)=>/*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-136 w-full"
+            }, card))
+    });
+}
+
+//# sourceMappingURL=model-providers-section.js.map