import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ModelProvider, useModelContext } from '../contexts/ModelContext';
import { ModelConfigCard } from './ModelConfigCard';
import { useTheme } from '../theme';
export const ModelManagerInner = () => {
    const { models, defaultModel, setDefaultModel } = useModelContext();
    const theme = useTheme();
    return (_jsxs("div", { className: theme.modelManager.container, children: [models.map((model) => {
                const isDefault = defaultModel?.id === model.id;
                return (_jsx("div", { className: isDefault ? theme.modelManager.modelCardActive : theme.modelManager.modelCard, children: _jsx(ModelConfigCard, { modelId: model.id, isDefault: isDefault, onMakeDefault: () => setDefaultModel(model.id) }) }, model.id));
            }), models.length === 0 && (_jsx("div", { className: theme.modelManager.emptyState, children: "No language models configured yet. Click \"Add model\" to get started." }))] }));
};
export const ModelManager = () => (_jsx(ModelProvider, { children: _jsx(ModelManagerInner, {}) }));
