feat: Implement provider groupings with account calculator and compre… (#113)
* feat: Implement provider groupings with account calculator and comprehensive fixes - Add provider detection utilities (detectProvider, PROVIDER_REGISTRY) for Claude/Gemini/Others categorization - Implement grouping logic (groupModelsByProvider, calculateProviderStats, calculateAccountStats) with health status calculation - Create useProviderGrouping hook for collapsible state management and persistence - Add ProviderGroup component with health indicators, progress bars, and model visibility integration - Enhance CloudAccountList with account-level calculator showing overall percentage and earliest reset time - Implement grid layout selector (auto/2-col/3-col/list) with config persistence and tooltips - Add global quota aggregate bar across all accounts in top statistics - Fix model visibility settings regression by accessing account.quota.models instead of account.quota - Show 'Rate Limited' instead of '0%' for exhausted quotas with consistent getQuotaLabel function - Add comprehensive i18n translations for layout selector and rate limited labels (en, zh-CN, ru) - Disable batch operations when provider groupings are enabled to prevent conflicts - Include unit tests for provider detection logic and grouping functionality Addresses critical issues: model list regression, rate limited display, layout control, global quota visibility, and consistent quota labeling across all components. * fix: resolve ESLint no-ex-assign violations in proxy service - Fix exception parameter reassignment in catch blocks - Rename catch parameters to avoid no-ex-assign rule violations - Maintain same error handling logic while complying with linting rules * fix: add missing Models tab to settings page - Add Models tab between General and Proxy tabs - Import and integrate ModelVisibilitySettings component - Fix critical regression where model visibility settings were inaccessible * fix: add missing React hook imports in settings route * test: remove obsolete tests for removed controller APIs --------- Co-authored-by: Draculabo <[email protected]>
This commit is contained in:
ArtemisAIandDraculabo authored and GitHub committed
1 parent
118fad567e
commit
1e59a1c901
12 files changed
+1237
-97
No files matched your search
@@ -0,0 +1,211 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppConfig } from '@/hooks/useAppConfig';
|
||||
import { useCloudAccounts } from '@/hooks/useCloudAccounts';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Loader2, Search, RotateCcw, Save } from 'lucide-react';
|
||||
|
||||
interface ModelVisibilitySettingsProps {}
|
||||
|
||||
export const ModelVisibilitySettings: React.FC<ModelVisibilitySettingsProps> = () => {
|
||||
const { t } = useTranslation();
|
||||
const { config, saveConfig } = useAppConfig();
|
||||
const { data: accounts, isLoading: accountsLoading } = useCloudAccounts();
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [modelVisibility, setModelVisibility] = useState<Record<string, boolean>>({});
|
||||
const [providerGroupingsEnabled, setProviderGroupingsEnabled] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Initialize model visibility and provider groupings from config
|
||||
React.useEffect(() => {
|
||||
if (config?.model_visibility) {
|
||||
setModelVisibility(config.model_visibility);
|
||||
}
|
||||
if (config?.provider_groupings_enabled !== undefined) {
|
||||
setProviderGroupingsEnabled(config.provider_groupings_enabled);
|
||||
}
|
||||
}, [config?.model_visibility, config?.provider_groupings_enabled]);
|
||||
|
||||
// Get all unique models from all accounts
|
||||
const allModels = useMemo(() => {
|
||||
if (!accounts) return [];
|
||||
|
||||
const modelSet = new Set<string>();
|
||||
accounts.forEach((account) => {
|
||||
if (account.quota?.models) {
|
||||
Object.keys(account.quota.models).forEach((model) => {
|
||||
modelSet.add(model);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return Array.from(modelSet).sort();
|
||||
}, [accounts]);
|
||||
|
||||
// Filter models based on search term
|
||||
const filteredModels = useMemo(() => {
|
||||
return allModels.filter((model) => model.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
}, [allModels, searchTerm]);
|
||||
|
||||
// Handle model visibility toggle
|
||||
const handleModelToggle = (modelName: string, checked: boolean) => {
|
||||
setModelVisibility((prev) => ({
|
||||
...prev,
|
||||
[modelName]: checked,
|
||||
}));
|
||||
};
|
||||
|
||||
// Reset to defaults (all models visible)
|
||||
const handleReset = () => {
|
||||
setModelVisibility({});
|
||||
};
|
||||
|
||||
// Save configuration
|
||||
const handleSave = async () => {
|
||||
if (!config) return;
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await saveConfig({
|
||||
...config,
|
||||
model_visibility: modelVisibility,
|
||||
provider_groupings_enabled: providerGroupingsEnabled,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to save model visibility settings:', error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (accountsLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center p-6">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
<span className="ml-2">{t('common.loading')}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span>{t('settings.modelVisibility.title')}</span>
|
||||
<Badge variant="secondary">{filteredModels.length} models</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>{t('settings.modelVisibility.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
|
||||
<Input
|
||||
placeholder={t('settings.modelVisibility.searchPlaceholder')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Provider Groupings Toggle */}
|
||||
<div className="flex items-center justify-between rounded-lg border p-3">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="provider-groupings" className="text-sm font-medium">
|
||||
{t('settings.providerGroupings.enabled')}
|
||||
</Label>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{t('settings.providerGroupings.description')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="provider-groupings"
|
||||
checked={providerGroupingsEnabled}
|
||||
onCheckedChange={setProviderGroupingsEnabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Model List */}
|
||||
<div className="max-h-96 space-y-2 overflow-y-auto rounded-lg border p-4">
|
||||
{filteredModels.length === 0 ? (
|
||||
<div className="text-muted-foreground py-8 text-center">
|
||||
{searchTerm
|
||||
? t('settings.modelVisibility.noModelsFound')
|
||||
: t('settings.modelVisibility.noModels')}
|
||||
</div>
|
||||
) : (
|
||||
filteredModels.map((modelName) => {
|
||||
const isVisible = modelVisibility[modelName] !== false; // Default to true
|
||||
return (
|
||||
<div
|
||||
key={modelName}
|
||||
className="hover:bg-muted/50 flex items-center space-x-3 rounded p-2"
|
||||
>
|
||||
<Checkbox
|
||||
id={`model-${modelName}`}
|
||||
checked={isVisible}
|
||||
onCheckedChange={(checked) => handleModelToggle(modelName, checked as boolean)}
|
||||
/>
|
||||
<label
|
||||
htmlFor={`model-${modelName}`}
|
||||
className="flex-1 cursor-pointer text-sm font-medium"
|
||||
>
|
||||
{modelName}
|
||||
</label>
|
||||
{!isVisible && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{t('settings.modelVisibility.hidden')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleReset}
|
||||
disabled={Object.keys(modelVisibility).length === 0}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
{t('settings.modelVisibility.reset')}
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isSaving} className="flex items-center gap-2">
|
||||
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||
{isSaving ? t('settings.modelVisibility.saving') : t('settings.modelVisibility.save')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="text-muted-foreground border-t pt-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>
|
||||
{t('settings.modelVisibility.totalModels')}: {allModels.length}
|
||||
</span>
|
||||
<span>
|
||||
{t('settings.modelVisibility.visibleModels')}:{' '}
|
||||
{allModels.length - Object.values(modelVisibility).filter((v) => !v).length}
|
||||
</span>
|
||||
<span>
|
||||
{t('settings.modelVisibility.hiddenModels')}:{' '}
|
||||
{Object.values(modelVisibility).filter((v) => !v).length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user