Final UI V3
# UI V3 Changelog Major updates and improvements in this release: ## Core Changes - Complete NEW REWRITTEN UI system overhaul (V3) with semantic design tokens - New settings management system with drag-and-drop capabilities - Enhanced provider system supporting multiple AI services - Improved theme system with better dark mode support - New component library with consistent design patterns ## Technical Updates - Reorganized project architecture for better maintainability - Performance optimizations and bundle size improvements - Enhanced security features and access controls - Improved developer experience with better tooling - Comprehensive testing infrastructure ## New Features - Background rays effect for improved visual feedback - Advanced tab management system - Automatic and manual update support - Enhanced error handling and visualization - Improved accessibility across all components For detailed information about all changes and improvements, please see the full changelog.
This commit is contained in:
Stijnus
@@ -0,0 +1,305 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
|
||||
import type { IProviderConfig } from '~/types/model';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { toast } from 'react-toastify';
|
||||
import { providerBaseUrlEnvKeys } from '~/utils/constants';
|
||||
import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
|
||||
import { BsRobot, BsCloud } from 'react-icons/bs';
|
||||
import { TbBrain, TbCloudComputing } from 'react-icons/tb';
|
||||
import { BiCodeBlock, BiChip } from 'react-icons/bi';
|
||||
import { FaCloud, FaBrain } from 'react-icons/fa';
|
||||
import type { IconType } from 'react-icons';
|
||||
|
||||
// Add type for provider names to ensure type safety
|
||||
type ProviderName =
|
||||
| 'AmazonBedrock'
|
||||
| 'Anthropic'
|
||||
| 'Cohere'
|
||||
| 'Deepseek'
|
||||
| 'Google'
|
||||
| 'Groq'
|
||||
| 'HuggingFace'
|
||||
| 'Hyperbolic'
|
||||
| 'Mistral'
|
||||
| 'OpenAI'
|
||||
| 'OpenRouter'
|
||||
| 'Perplexity'
|
||||
| 'Together'
|
||||
| 'XAI';
|
||||
|
||||
// Update the PROVIDER_ICONS type to use the ProviderName type
|
||||
const PROVIDER_ICONS: Record<ProviderName, IconType> = {
|
||||
AmazonBedrock: SiAmazon,
|
||||
Anthropic: FaBrain,
|
||||
Cohere: BiChip,
|
||||
Deepseek: BiCodeBlock,
|
||||
Google: SiGoogle,
|
||||
Groq: BsCloud,
|
||||
HuggingFace: SiHuggingface,
|
||||
Hyperbolic: TbCloudComputing,
|
||||
Mistral: TbBrain,
|
||||
OpenAI: SiOpenai,
|
||||
OpenRouter: FaCloud,
|
||||
Perplexity: SiPerplexity,
|
||||
Together: BsCloud,
|
||||
XAI: BsRobot,
|
||||
};
|
||||
|
||||
// Update PROVIDER_DESCRIPTIONS to use the same type
|
||||
const PROVIDER_DESCRIPTIONS: Partial<Record<ProviderName, string>> = {
|
||||
Anthropic: 'Access Claude and other Anthropic models',
|
||||
OpenAI: 'Use GPT-4, GPT-3.5, and other OpenAI models',
|
||||
};
|
||||
|
||||
const CloudProvidersTab = () => {
|
||||
const settings = useSettings();
|
||||
const [editingProvider, setEditingProvider] = useState<string | null>(null);
|
||||
const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
|
||||
const [categoryEnabled, setCategoryEnabled] = useState<boolean>(false);
|
||||
|
||||
// Load and filter providers
|
||||
useEffect(() => {
|
||||
const newFilteredProviders = Object.entries(settings.providers || {})
|
||||
.filter(([key]) => !['Ollama', 'LMStudio', 'OpenAILike'].includes(key))
|
||||
.map(([key, value]) => ({
|
||||
name: key,
|
||||
settings: value.settings,
|
||||
staticModels: value.staticModels || [],
|
||||
getDynamicModels: value.getDynamicModels,
|
||||
getApiKeyLink: value.getApiKeyLink,
|
||||
labelForGetApiKey: value.labelForGetApiKey,
|
||||
icon: value.icon,
|
||||
}));
|
||||
|
||||
const sorted = newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
|
||||
setFilteredProviders(sorted);
|
||||
|
||||
// Update category enabled state
|
||||
const allEnabled = newFilteredProviders.every((p) => p.settings.enabled);
|
||||
setCategoryEnabled(allEnabled);
|
||||
}, [settings.providers]);
|
||||
|
||||
const handleToggleCategory = useCallback(
|
||||
(enabled: boolean) => {
|
||||
// Update all providers
|
||||
filteredProviders.forEach((provider) => {
|
||||
settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
||||
});
|
||||
|
||||
setCategoryEnabled(enabled);
|
||||
toast.success(enabled ? 'All cloud providers enabled' : 'All cloud providers disabled');
|
||||
},
|
||||
[filteredProviders, settings],
|
||||
);
|
||||
|
||||
const handleToggleProvider = useCallback(
|
||||
(provider: IProviderConfig, enabled: boolean) => {
|
||||
// Update the provider settings in the store
|
||||
settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
||||
|
||||
if (enabled) {
|
||||
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
|
||||
toast.success(`${provider.name} enabled`);
|
||||
} else {
|
||||
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
|
||||
toast.success(`${provider.name} disabled`);
|
||||
}
|
||||
},
|
||||
[settings],
|
||||
);
|
||||
|
||||
const handleUpdateBaseUrl = useCallback(
|
||||
(provider: IProviderConfig, baseUrl: string) => {
|
||||
const newBaseUrl: string | undefined = baseUrl.trim() || undefined;
|
||||
|
||||
// Update the provider settings in the store
|
||||
settings.updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
|
||||
|
||||
logStore.logProvider(`Base URL updated for ${provider.name}`, {
|
||||
provider: provider.name,
|
||||
baseUrl: newBaseUrl,
|
||||
});
|
||||
toast.success(`${provider.name} base URL updated`);
|
||||
setEditingProvider(null);
|
||||
},
|
||||
[settings],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4 mt-8 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'text-purple-500',
|
||||
)}
|
||||
>
|
||||
<TbCloudComputing className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary">Cloud Providers</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Connect to cloud-based AI models and services</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">Enable All Cloud</span>
|
||||
<Switch checked={categoryEnabled} onCheckedChange={handleToggleCategory} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{filteredProviders.map((provider, index) => (
|
||||
<motion.div
|
||||
key={provider.name}
|
||||
className={classNames(
|
||||
'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm',
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200',
|
||||
'relative overflow-hidden group',
|
||||
'flex flex-col',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-2 flex gap-1">
|
||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<motion.span
|
||||
className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Configurable
|
||||
</motion.span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-10 h-10 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
|
||||
{React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
|
||||
className: 'w-full h-full',
|
||||
'aria-label': `${provider.name} logo`,
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-4 mb-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
|
||||
{provider.name}
|
||||
</h4>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-0.5">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as keyof typeof PROVIDER_DESCRIPTIONS] ||
|
||||
(URL_CONFIGURABLE_PROVIDERS.includes(provider.name)
|
||||
? 'Configure custom endpoint for this provider'
|
||||
: 'Standard AI provider integration')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{editingProvider === provider.name ? (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={provider.settings.baseUrl}
|
||||
placeholder={`Enter ${provider.name} base URL`}
|
||||
className={classNames(
|
||||
'flex-1 px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleUpdateBaseUrl(provider, e.currentTarget.value);
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingProvider(null);
|
||||
}
|
||||
}}
|
||||
onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="flex-1 px-3 py-1.5 rounded-lg text-sm cursor-pointer group/url"
|
||||
onClick={() => setEditingProvider(provider.name)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:link text-sm" />
|
||||
<span className="group-hover/url:text-purple-500 transition-colors">
|
||||
{provider.settings.baseUrl || 'Click to set base URL'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{providerBaseUrlEnvKeys[provider.name]?.baseUrlKey && (
|
||||
<div className="mt-2 text-xs text-green-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:info" />
|
||||
<span>Environment URL set in .env file</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
|
||||
animate={{
|
||||
borderColor: provider.settings.enabled ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
|
||||
scale: provider.settings.enabled ? 1 : 0.98,
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CloudProvidersTab;
|
||||
@@ -0,0 +1,718 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
|
||||
import type { IProviderConfig } from '~/types/model';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { BsRobot } from 'react-icons/bs';
|
||||
import type { IconType } from 'react-icons';
|
||||
import { BiChip } from 'react-icons/bi';
|
||||
import { TbBrandOpenai } from 'react-icons/tb';
|
||||
import { providerBaseUrlEnvKeys } from '~/utils/constants';
|
||||
import { useToast } from '~/components/ui/use-toast';
|
||||
import { Progress } from '~/components/ui/Progress';
|
||||
import OllamaModelInstaller from './OllamaModelInstaller';
|
||||
|
||||
// Add type for provider names to ensure type safety
|
||||
type ProviderName = 'Ollama' | 'LMStudio' | 'OpenAILike';
|
||||
|
||||
// Update the PROVIDER_ICONS type to use the ProviderName type
|
||||
const PROVIDER_ICONS: Record<ProviderName, IconType> = {
|
||||
Ollama: BsRobot,
|
||||
LMStudio: BsRobot,
|
||||
OpenAILike: TbBrandOpenai,
|
||||
};
|
||||
|
||||
// Update PROVIDER_DESCRIPTIONS to use the same type
|
||||
const PROVIDER_DESCRIPTIONS: Record<ProviderName, string> = {
|
||||
Ollama: 'Run open-source models locally on your machine',
|
||||
LMStudio: 'Local model inference with LM Studio',
|
||||
OpenAILike: 'Connect to OpenAI-compatible API endpoints',
|
||||
};
|
||||
|
||||
// Add a constant for the Ollama API base URL
|
||||
const OLLAMA_API_URL = 'http://127.0.0.1:11434';
|
||||
|
||||
interface OllamaModel {
|
||||
name: string;
|
||||
digest: string;
|
||||
size: number;
|
||||
modified_at: string;
|
||||
details?: {
|
||||
family: string;
|
||||
parameter_size: string;
|
||||
quantization_level: string;
|
||||
};
|
||||
status?: 'idle' | 'updating' | 'updated' | 'error' | 'checking';
|
||||
error?: string;
|
||||
newDigest?: string;
|
||||
progress?: {
|
||||
current: number;
|
||||
total: number;
|
||||
status: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface OllamaPullResponse {
|
||||
status: string;
|
||||
completed?: number;
|
||||
total?: number;
|
||||
digest?: string;
|
||||
}
|
||||
|
||||
const isOllamaPullResponse = (data: unknown): data is OllamaPullResponse => {
|
||||
return (
|
||||
typeof data === 'object' &&
|
||||
data !== null &&
|
||||
'status' in data &&
|
||||
typeof (data as OllamaPullResponse).status === 'string'
|
||||
);
|
||||
};
|
||||
|
||||
export default function LocalProvidersTab() {
|
||||
const { providers, updateProviderSettings } = useSettings();
|
||||
const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
|
||||
const [categoryEnabled, setCategoryEnabled] = useState(false);
|
||||
const [ollamaModels, setOllamaModels] = useState<OllamaModel[]>([]);
|
||||
const [isLoadingModels, setIsLoadingModels] = useState(false);
|
||||
const [editingProvider, setEditingProvider] = useState<string | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Effect to filter and sort providers
|
||||
useEffect(() => {
|
||||
const newFilteredProviders = Object.entries(providers || {})
|
||||
.filter(([key]) => [...LOCAL_PROVIDERS, 'OpenAILike'].includes(key))
|
||||
.map(([key, value]) => {
|
||||
const provider = value as IProviderConfig;
|
||||
const envKey = providerBaseUrlEnvKeys[key]?.baseUrlKey;
|
||||
|
||||
// Get environment URL safely
|
||||
const envUrl = envKey ? (import.meta.env[envKey] as string | undefined) : undefined;
|
||||
|
||||
console.log(`Checking env URL for ${key}:`, {
|
||||
envKey,
|
||||
envUrl,
|
||||
currentBaseUrl: provider.settings.baseUrl,
|
||||
});
|
||||
|
||||
// If there's an environment URL and no base URL set, update it
|
||||
if (envUrl && !provider.settings.baseUrl) {
|
||||
console.log(`Setting base URL for ${key} from env:`, envUrl);
|
||||
updateProviderSettings(key, {
|
||||
...provider.settings,
|
||||
baseUrl: envUrl,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
name: key,
|
||||
settings: {
|
||||
...provider.settings,
|
||||
baseUrl: provider.settings.baseUrl || envUrl,
|
||||
},
|
||||
staticModels: provider.staticModels || [],
|
||||
getDynamicModels: provider.getDynamicModels,
|
||||
getApiKeyLink: provider.getApiKeyLink,
|
||||
labelForGetApiKey: provider.labelForGetApiKey,
|
||||
icon: provider.icon,
|
||||
} as IProviderConfig;
|
||||
});
|
||||
|
||||
// Custom sort function to ensure LMStudio appears before OpenAILike
|
||||
const sorted = newFilteredProviders.sort((a, b) => {
|
||||
if (a.name === 'LMStudio') {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (b.name === 'LMStudio') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (a.name === 'OpenAILike') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (b.name === 'OpenAILike') {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
setFilteredProviders(sorted);
|
||||
}, [providers, updateProviderSettings]);
|
||||
|
||||
// Add effect to update category toggle state based on provider states
|
||||
useEffect(() => {
|
||||
const newCategoryState = filteredProviders.every((p) => p.settings.enabled);
|
||||
setCategoryEnabled(newCategoryState);
|
||||
}, [filteredProviders]);
|
||||
|
||||
// Fetch Ollama models when enabled
|
||||
useEffect(() => {
|
||||
const ollamaProvider = filteredProviders.find((p) => p.name === 'Ollama');
|
||||
|
||||
if (ollamaProvider?.settings.enabled) {
|
||||
fetchOllamaModels();
|
||||
}
|
||||
}, [filteredProviders]);
|
||||
|
||||
const fetchOllamaModels = async () => {
|
||||
try {
|
||||
setIsLoadingModels(true);
|
||||
|
||||
const response = await fetch('http://127.0.0.1:11434/api/tags');
|
||||
const data = (await response.json()) as { models: OllamaModel[] };
|
||||
|
||||
setOllamaModels(
|
||||
data.models.map((model) => ({
|
||||
...model,
|
||||
status: 'idle' as const,
|
||||
})),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error fetching Ollama models:', error);
|
||||
} finally {
|
||||
setIsLoadingModels(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateOllamaModel = async (modelName: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await fetch(`${OLLAMA_API_URL}/api/pull`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: modelName }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to update ${modelName}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
|
||||
if (!reader) {
|
||||
throw new Error('No response reader available');
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = new TextDecoder().decode(value);
|
||||
const lines = text.split('\n').filter(Boolean);
|
||||
|
||||
for (const line of lines) {
|
||||
const rawData = JSON.parse(line);
|
||||
|
||||
if (!isOllamaPullResponse(rawData)) {
|
||||
console.error('Invalid response format:', rawData);
|
||||
continue;
|
||||
}
|
||||
|
||||
setOllamaModels((current) =>
|
||||
current.map((m) =>
|
||||
m.name === modelName
|
||||
? {
|
||||
...m,
|
||||
progress: {
|
||||
current: rawData.completed || 0,
|
||||
total: rawData.total || 0,
|
||||
status: rawData.status,
|
||||
},
|
||||
newDigest: rawData.digest,
|
||||
}
|
||||
: m,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const updatedResponse = await fetch('http://127.0.0.1:11434/api/tags');
|
||||
const updatedData = (await updatedResponse.json()) as { models: OllamaModel[] };
|
||||
const updatedModel = updatedData.models.find((m) => m.name === modelName);
|
||||
|
||||
return updatedModel !== undefined;
|
||||
} catch (error) {
|
||||
console.error(`Error updating ${modelName}:`, error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleCategory = useCallback(
|
||||
async (enabled: boolean) => {
|
||||
filteredProviders.forEach((provider) => {
|
||||
updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
||||
});
|
||||
toast(enabled ? 'All local providers enabled' : 'All local providers disabled');
|
||||
},
|
||||
[filteredProviders, updateProviderSettings],
|
||||
);
|
||||
|
||||
const handleToggleProvider = (provider: IProviderConfig, enabled: boolean) => {
|
||||
updateProviderSettings(provider.name, {
|
||||
...provider.settings,
|
||||
enabled,
|
||||
});
|
||||
|
||||
if (enabled) {
|
||||
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
|
||||
toast(`${provider.name} enabled`);
|
||||
} else {
|
||||
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
|
||||
toast(`${provider.name} disabled`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateBaseUrl = (provider: IProviderConfig, newBaseUrl: string) => {
|
||||
updateProviderSettings(provider.name, {
|
||||
...provider.settings,
|
||||
baseUrl: newBaseUrl,
|
||||
});
|
||||
toast(`${provider.name} base URL updated`);
|
||||
setEditingProvider(null);
|
||||
};
|
||||
|
||||
const handleUpdateOllamaModel = async (modelName: string) => {
|
||||
const updateSuccess = await updateOllamaModel(modelName);
|
||||
|
||||
if (updateSuccess) {
|
||||
toast(`Updated ${modelName}`);
|
||||
} else {
|
||||
toast(`Failed to update ${modelName}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteOllamaModel = async (modelName: string) => {
|
||||
try {
|
||||
const response = await fetch(`${OLLAMA_API_URL}/api/delete`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: modelName }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to delete ${modelName}`);
|
||||
}
|
||||
|
||||
setOllamaModels((current) => current.filter((m) => m.name !== modelName));
|
||||
toast(`Deleted ${modelName}`);
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
console.error(`Error deleting ${modelName}:`, errorMessage);
|
||||
toast(`Failed to delete ${modelName}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Update model details display
|
||||
const ModelDetails = ({ model }: { model: OllamaModel }) => (
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:code text-purple-500" />
|
||||
<span>{model.digest.substring(0, 7)}</span>
|
||||
</div>
|
||||
{model.details && (
|
||||
<>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:database text-purple-500" />
|
||||
<span>{model.details.parameter_size}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:cube text-purple-500" />
|
||||
<span>{model.details.quantization_level}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Update model actions to not use Tooltip
|
||||
const ModelActions = ({
|
||||
model,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
}: {
|
||||
model: OllamaModel;
|
||||
onUpdate: () => void;
|
||||
onDelete: () => void;
|
||||
}) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.button
|
||||
onClick={onUpdate}
|
||||
disabled={model.status === 'updating'}
|
||||
className={classNames(
|
||||
'rounded-lg p-2',
|
||||
'bg-purple-500/10 text-purple-500',
|
||||
'hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
{ 'opacity-50 cursor-not-allowed': model.status === 'updating' },
|
||||
)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
title="Update model"
|
||||
>
|
||||
{model.status === 'updating' ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-sm">Updating...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="i-ph:arrows-clockwise text-lg" />
|
||||
)}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
onClick={onDelete}
|
||||
disabled={model.status === 'updating'}
|
||||
className={classNames(
|
||||
'rounded-lg p-2',
|
||||
'bg-red-500/10 text-red-500',
|
||||
'hover:bg-red-500/20',
|
||||
'transition-all duration-200',
|
||||
{ 'opacity-50 cursor-not-allowed': model.status === 'updating' },
|
||||
)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
title="Delete model"
|
||||
>
|
||||
<div className="i-ph:trash text-lg" />
|
||||
</motion.button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'rounded-lg bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm p-4',
|
||||
'hover:bg-bolt-elements-background-depth-2',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
role="region"
|
||||
aria-label="Local Providers Configuration"
|
||||
>
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Header section */}
|
||||
<div className="flex items-center justify-between gap-4 border-b border-bolt-elements-borderColor pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-10 h-10 flex items-center justify-center rounded-xl',
|
||||
'bg-purple-500/10 text-purple-500',
|
||||
)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<BiChip className="w-6 h-6" />
|
||||
</motion.div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Local AI Models</h2>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Configure and manage your local AI providers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">Enable All</span>
|
||||
<Switch
|
||||
checked={categoryEnabled}
|
||||
onCheckedChange={handleToggleCategory}
|
||||
aria-label="Toggle all local providers"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ollama Section */}
|
||||
{filteredProviders
|
||||
.filter((provider) => provider.name === 'Ollama')
|
||||
.map((provider) => (
|
||||
<motion.div
|
||||
key={provider.name}
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2 rounded-xl',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200 p-5',
|
||||
'relative overflow-hidden group',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Provider Header */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-12 h-12 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
|
||||
className: 'w-7 h-7',
|
||||
'aria-label': `${provider.name} icon`,
|
||||
})}
|
||||
</motion.div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">Local</span>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-1">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
|
||||
aria-label={`Toggle ${provider.name} provider`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Ollama Models Section */}
|
||||
{provider.settings.enabled && (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mt-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:cube-duotone text-purple-500" />
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">Installed Models</h4>
|
||||
</div>
|
||||
{isLoadingModels ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-sm text-bolt-elements-textSecondary">Loading models...</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
{ollamaModels.length} models available
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{isLoadingModels ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-20 w-full bg-bolt-elements-background-depth-3 rounded-lg animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : ollamaModels.length === 0 ? (
|
||||
<div className="text-center py-8 text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:cube-transparent text-4xl mx-auto mb-2" />
|
||||
<p>No models installed yet</p>
|
||||
<p className="text-sm">Install your first model below</p>
|
||||
</div>
|
||||
) : (
|
||||
ollamaModels.map((model) => (
|
||||
<motion.div
|
||||
key={model.name}
|
||||
className={classNames(
|
||||
'p-4 rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary">{model.name}</h5>
|
||||
<ModelStatusBadge status={model.status} />
|
||||
</div>
|
||||
<ModelDetails model={model} />
|
||||
</div>
|
||||
<ModelActions
|
||||
model={model}
|
||||
onUpdate={() => handleUpdateOllamaModel(model.name)}
|
||||
onDelete={() => {
|
||||
if (window.confirm(`Are you sure you want to delete ${model.name}?`)) {
|
||||
handleDeleteOllamaModel(model.name);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{model.progress && (
|
||||
<div className="mt-3">
|
||||
<Progress
|
||||
value={Math.round((model.progress.current / model.progress.total) * 100)}
|
||||
className="h-1"
|
||||
/>
|
||||
<div className="flex justify-between mt-1 text-xs text-bolt-elements-textSecondary">
|
||||
<span>{model.progress.status}</span>
|
||||
<span>{Math.round((model.progress.current / model.progress.total) * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Model Installation Section */}
|
||||
<OllamaModelInstaller onModelInstalled={fetchOllamaModels} />
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Other Providers Section */}
|
||||
<div className="border-t border-bolt-elements-borderColor pt-6 mt-8">
|
||||
<h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Other Local Providers</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{filteredProviders
|
||||
.filter((provider) => provider.name !== 'Ollama')
|
||||
.map((provider, index) => (
|
||||
<motion.div
|
||||
key={provider.name}
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2 rounded-xl',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200 p-5',
|
||||
'relative overflow-hidden group',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Provider Header */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-12 h-12 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
|
||||
className: 'w-7 h-7',
|
||||
'aria-label': `${provider.name} icon`,
|
||||
})}
|
||||
</motion.div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
|
||||
<div className="flex gap-1">
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">
|
||||
Local
|
||||
</span>
|
||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500">
|
||||
Configurable
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-1">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
|
||||
aria-label={`Toggle ${provider.name} provider`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL Configuration Section */}
|
||||
<AnimatePresence>
|
||||
{provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="mt-4"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
|
||||
{editingProvider === provider.name ? (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={provider.settings.baseUrl}
|
||||
placeholder={`Enter ${provider.name} base URL`}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleUpdateBaseUrl(provider, e.currentTarget.value);
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingProvider(null);
|
||||
}
|
||||
}}
|
||||
onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => setEditingProvider(provider.name)}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:link text-sm" />
|
||||
<span>{provider.settings.baseUrl || 'Click to set base URL'}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper component for model status badge
|
||||
function ModelStatusBadge({ status }: { status?: string }) {
|
||||
if (!status || status === 'idle') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
updating: { bg: 'bg-yellow-500/10', text: 'text-yellow-500', label: 'Updating' },
|
||||
updated: { bg: 'bg-green-500/10', text: 'text-green-500', label: 'Updated' },
|
||||
error: { bg: 'bg-red-500/10', text: 'text-red-500', label: 'Error' },
|
||||
};
|
||||
|
||||
const config = statusConfig[status as keyof typeof statusConfig];
|
||||
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={classNames('px-2 py-0.5 rounded-full text-xs font-medium', config.bg, config.text)}>
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,597 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { Progress } from '~/components/ui/Progress';
|
||||
import { useToast } from '~/components/ui/use-toast';
|
||||
|
||||
interface OllamaModelInstallerProps {
|
||||
onModelInstalled: () => void;
|
||||
}
|
||||
|
||||
interface InstallProgress {
|
||||
status: string;
|
||||
progress: number;
|
||||
downloadedSize?: string;
|
||||
totalSize?: string;
|
||||
speed?: string;
|
||||
}
|
||||
|
||||
interface ModelInfo {
|
||||
name: string;
|
||||
desc: string;
|
||||
size: string;
|
||||
tags: string[];
|
||||
installedVersion?: string;
|
||||
latestVersion?: string;
|
||||
needsUpdate?: boolean;
|
||||
status?: 'idle' | 'installing' | 'updating' | 'updated' | 'error';
|
||||
details?: {
|
||||
family: string;
|
||||
parameter_size: string;
|
||||
quantization_level: string;
|
||||
};
|
||||
}
|
||||
|
||||
const POPULAR_MODELS: ModelInfo[] = [
|
||||
{
|
||||
name: 'deepseek-coder:6.7b',
|
||||
desc: "DeepSeek's code generation model",
|
||||
size: '4.1GB',
|
||||
tags: ['coding', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'llama2:7b',
|
||||
desc: "Meta's Llama 2 (7B parameters)",
|
||||
size: '3.8GB',
|
||||
tags: ['general', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'mistral:7b',
|
||||
desc: "Mistral's 7B model",
|
||||
size: '4.1GB',
|
||||
tags: ['general', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'gemma:7b',
|
||||
desc: "Google's Gemma model",
|
||||
size: '4.0GB',
|
||||
tags: ['general', 'new'],
|
||||
},
|
||||
{
|
||||
name: 'codellama:7b',
|
||||
desc: "Meta's Code Llama model",
|
||||
size: '4.1GB',
|
||||
tags: ['coding', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'neural-chat:7b',
|
||||
desc: "Intel's Neural Chat model",
|
||||
size: '4.1GB',
|
||||
tags: ['chat', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'phi:latest',
|
||||
desc: "Microsoft's Phi-2 model",
|
||||
size: '2.7GB',
|
||||
tags: ['small', 'fast'],
|
||||
},
|
||||
{
|
||||
name: 'qwen:7b',
|
||||
desc: "Alibaba's Qwen model",
|
||||
size: '4.1GB',
|
||||
tags: ['general'],
|
||||
},
|
||||
{
|
||||
name: 'solar:10.7b',
|
||||
desc: "Upstage's Solar model",
|
||||
size: '6.1GB',
|
||||
tags: ['large', 'powerful'],
|
||||
},
|
||||
{
|
||||
name: 'openchat:7b',
|
||||
desc: 'Open-source chat model',
|
||||
size: '4.1GB',
|
||||
tags: ['chat', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'dolphin-phi:2.7b',
|
||||
desc: 'Lightweight chat model',
|
||||
size: '1.6GB',
|
||||
tags: ['small', 'fast'],
|
||||
},
|
||||
{
|
||||
name: 'stable-code:3b',
|
||||
desc: 'Lightweight coding model',
|
||||
size: '1.8GB',
|
||||
tags: ['coding', 'small'],
|
||||
},
|
||||
];
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
function formatSpeed(bytesPerSecond: number): string {
|
||||
return `${formatBytes(bytesPerSecond)}/s`;
|
||||
}
|
||||
|
||||
// Add Ollama Icon SVG component
|
||||
function OllamaIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 1024 1024" className={className} fill="currentColor">
|
||||
<path d="M684.3 322.2H339.8c-9.5.1-17.7 6.8-19.6 16.1-8.2 41.4-12.4 83.5-12.4 125.7 0 42.2 4.2 84.3 12.4 125.7 1.9 9.3 10.1 16 19.6 16.1h344.5c9.5-.1 17.7-6.8 19.6-16.1 8.2-41.4 12.4-83.5 12.4-125.7 0-42.2-4.2-84.3-12.4-125.7-1.9-9.3-10.1-16-19.6-16.1zM512 640c-176.7 0-320-143.3-320-320S335.3 0 512 0s320 143.3 320 320-143.3 320-320 320z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelInstallerProps) {
|
||||
const [modelString, setModelString] = useState('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isInstalling, setIsInstalling] = useState(false);
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [installProgress, setInstallProgress] = useState<InstallProgress | null>(null);
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Function to check installed models and their versions
|
||||
const checkInstalledModels = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:11434/api/tags', {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch installed models');
|
||||
}
|
||||
|
||||
const data = (await response.json()) as { models: Array<{ name: string; digest: string; latest: string }> };
|
||||
const installedModels = data.models || [];
|
||||
|
||||
// Update models with installed versions
|
||||
setModels((prevModels) =>
|
||||
prevModels.map((model) => {
|
||||
const installed = installedModels.find((m) => m.name.toLowerCase() === model.name.toLowerCase());
|
||||
|
||||
if (installed) {
|
||||
return {
|
||||
...model,
|
||||
installedVersion: installed.digest.substring(0, 8),
|
||||
needsUpdate: installed.digest !== installed.latest,
|
||||
latestVersion: installed.latest?.substring(0, 8),
|
||||
};
|
||||
}
|
||||
|
||||
return model;
|
||||
}),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error checking installed models:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Check installed models on mount and after installation
|
||||
useEffect(() => {
|
||||
checkInstalledModels();
|
||||
}, []);
|
||||
|
||||
const handleCheckUpdates = async () => {
|
||||
setIsChecking(true);
|
||||
|
||||
try {
|
||||
await checkInstalledModels();
|
||||
toast('Model versions checked');
|
||||
} catch (err) {
|
||||
console.error('Failed to check model versions:', err);
|
||||
toast('Failed to check model versions');
|
||||
} finally {
|
||||
setIsChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredModels = models.filter((model) => {
|
||||
const matchesSearch =
|
||||
searchQuery === '' ||
|
||||
model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
model.desc.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => model.tags.includes(tag));
|
||||
|
||||
return matchesSearch && matchesTags;
|
||||
});
|
||||
|
||||
const handleInstallModel = async (modelToInstall: string) => {
|
||||
if (!modelToInstall) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsInstalling(true);
|
||||
setInstallProgress({
|
||||
status: 'Starting download...',
|
||||
progress: 0,
|
||||
downloadedSize: '0 B',
|
||||
totalSize: 'Calculating...',
|
||||
speed: '0 B/s',
|
||||
});
|
||||
setModelString('');
|
||||
setSearchQuery('');
|
||||
|
||||
const response = await fetch('http://127.0.0.1:11434/api/pull', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: modelToInstall }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
|
||||
if (!reader) {
|
||||
throw new Error('Failed to get response reader');
|
||||
}
|
||||
|
||||
let lastTime = Date.now();
|
||||
let lastBytes = 0;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = new TextDecoder().decode(value);
|
||||
const lines = text.split('\n').filter(Boolean);
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
|
||||
if ('status' in data) {
|
||||
const currentTime = Date.now();
|
||||
const timeDiff = (currentTime - lastTime) / 1000; // Convert to seconds
|
||||
const bytesDiff = (data.completed || 0) - lastBytes;
|
||||
const speed = bytesDiff / timeDiff;
|
||||
|
||||
setInstallProgress({
|
||||
status: data.status,
|
||||
progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
|
||||
downloadedSize: formatBytes(data.completed || 0),
|
||||
totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
|
||||
speed: formatSpeed(speed),
|
||||
});
|
||||
|
||||
lastTime = currentTime;
|
||||
lastBytes = data.completed || 0;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing progress:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toast('Successfully installed ' + modelToInstall + '. The model list will refresh automatically.');
|
||||
|
||||
// Ensure we call onModelInstalled after successful installation
|
||||
setTimeout(() => {
|
||||
onModelInstalled();
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
console.error(`Error installing ${modelToInstall}:`, errorMessage);
|
||||
toast(`Failed to install ${modelToInstall}. ${errorMessage}`);
|
||||
} finally {
|
||||
setIsInstalling(false);
|
||||
setInstallProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateModel = async (modelToUpdate: string) => {
|
||||
try {
|
||||
setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
|
||||
|
||||
const response = await fetch('http://127.0.0.1:11434/api/pull', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: modelToUpdate }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
|
||||
if (!reader) {
|
||||
throw new Error('Failed to get response reader');
|
||||
}
|
||||
|
||||
let lastTime = Date.now();
|
||||
let lastBytes = 0;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = new TextDecoder().decode(value);
|
||||
const lines = text.split('\n').filter(Boolean);
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
|
||||
if ('status' in data) {
|
||||
const currentTime = Date.now();
|
||||
const timeDiff = (currentTime - lastTime) / 1000;
|
||||
const bytesDiff = (data.completed || 0) - lastBytes;
|
||||
const speed = bytesDiff / timeDiff;
|
||||
|
||||
setInstallProgress({
|
||||
status: data.status,
|
||||
progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
|
||||
downloadedSize: formatBytes(data.completed || 0),
|
||||
totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
|
||||
speed: formatSpeed(speed),
|
||||
});
|
||||
|
||||
lastTime = currentTime;
|
||||
lastBytes = data.completed || 0;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing progress:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toast('Successfully updated ' + modelToUpdate);
|
||||
|
||||
// Refresh model list after update
|
||||
await checkInstalledModels();
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
console.error(`Error updating ${modelToUpdate}:`, errorMessage);
|
||||
toast(`Failed to update ${modelToUpdate}. ${errorMessage}`);
|
||||
setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'error' } : m)));
|
||||
} finally {
|
||||
setInstallProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
const allTags = Array.from(new Set(POPULAR_MODELS.flatMap((model) => model.tags)));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<OllamaIcon className="w-8 h-8 text-purple-500" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Ollama Models</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-1">Install and manage your Ollama models</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.button
|
||||
onClick={handleCheckUpdates}
|
||||
disabled={isChecking}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg',
|
||||
'bg-purple-500/10 text-purple-500',
|
||||
'hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{isChecking ? (
|
||||
<div className="i-ph:spinner-gap-bold animate-spin" />
|
||||
) : (
|
||||
<div className="i-ph:arrows-clockwise" />
|
||||
)}
|
||||
Check Updates
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
type="text"
|
||||
className={classNames(
|
||||
'w-full px-4 py-3 rounded-xl',
|
||||
'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
placeholder="Search models or enter custom model name..."
|
||||
value={searchQuery || modelString}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchQuery(value);
|
||||
setModelString(value);
|
||||
}}
|
||||
disabled={isInstalling}
|
||||
/>
|
||||
<p className="text-xs text-bolt-elements-textTertiary px-1">
|
||||
Browse models at{' '}
|
||||
<a
|
||||
href="https://ollama.com/library"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-purple-500 hover:underline inline-flex items-center gap-0.5"
|
||||
>
|
||||
ollama.com/library
|
||||
<div className="i-ph:arrow-square-out text-[10px]" />
|
||||
</a>{' '}
|
||||
and copy model names to install
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.button
|
||||
onClick={() => handleInstallModel(modelString)}
|
||||
disabled={!modelString || isInstalling}
|
||||
className={classNames(
|
||||
'rounded-xl px-6 py-3',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'transition-all duration-200',
|
||||
{ 'opacity-50 cursor-not-allowed': !modelString || isInstalling },
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{isInstalling ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin" />
|
||||
<span>Installing...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<OllamaIcon className="w-4 h-4" />
|
||||
<span>Install Model</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allTags.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => {
|
||||
setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
|
||||
}}
|
||||
className={classNames(
|
||||
'px-3 py-1 rounded-full text-xs font-medium transition-all duration-200',
|
||||
selectedTags.includes(tag)
|
||||
? 'bg-purple-500 text-white'
|
||||
: 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-4',
|
||||
)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{filteredModels.map((model) => (
|
||||
<motion.div
|
||||
key={model.name}
|
||||
className={classNames(
|
||||
'flex items-start gap-2 p-3 rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
'relative group',
|
||||
)}
|
||||
>
|
||||
<OllamaIcon className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-bolt-elements-textPrimary font-mono text-sm">{model.name}</p>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-0.5">{model.desc}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs text-bolt-elements-textTertiary">{model.size}</span>
|
||||
{model.installedVersion && (
|
||||
<div className="mt-0.5 flex flex-col items-end gap-0.5">
|
||||
<span className="text-xs text-bolt-elements-textTertiary">v{model.installedVersion}</span>
|
||||
{model.needsUpdate && model.latestVersion && (
|
||||
<span className="text-xs text-purple-500">v{model.latestVersion} available</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{model.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-1.5 py-0.5 rounded-full text-[10px] bg-bolt-elements-background-depth-4 text-bolt-elements-textTertiary"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{model.installedVersion ? (
|
||||
model.needsUpdate ? (
|
||||
<motion.button
|
||||
onClick={() => handleUpdateModel(model.name)}
|
||||
className={classNames(
|
||||
'px-2 py-0.5 rounded-lg text-xs',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-1',
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="i-ph:arrows-clockwise text-xs" />
|
||||
Update
|
||||
</motion.button>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 rounded-lg text-xs text-green-500 bg-green-500/10">Up to date</span>
|
||||
)
|
||||
) : (
|
||||
<motion.button
|
||||
onClick={() => handleInstallModel(model.name)}
|
||||
className={classNames(
|
||||
'px-2 py-0.5 rounded-lg text-xs',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-1',
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="i-ph:download text-xs" />
|
||||
Install
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{installProgress && (
|
||||
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-bolt-elements-textSecondary">{installProgress.status}</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-bolt-elements-textTertiary">
|
||||
{installProgress.downloadedSize} / {installProgress.totalSize}
|
||||
</span>
|
||||
<span className="text-bolt-elements-textTertiary">{installProgress.speed}</span>
|
||||
<span className="text-bolt-elements-textSecondary">{Math.round(installProgress.progress)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={installProgress.progress} className="h-1" />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import type { ServiceStatus } from './types';
|
||||
import { ProviderStatusCheckerFactory } from './provider-factory';
|
||||
|
||||
export default function ServiceStatusTab() {
|
||||
const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAllProviders = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const providers = ProviderStatusCheckerFactory.getProviderNames();
|
||||
const statuses: ServiceStatus[] = [];
|
||||
|
||||
for (const provider of providers) {
|
||||
try {
|
||||
const checker = ProviderStatusCheckerFactory.getChecker(provider);
|
||||
const result = await checker.checkStatus();
|
||||
|
||||
statuses.push({
|
||||
provider,
|
||||
...result,
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Error checking ${provider} status:`, err);
|
||||
statuses.push({
|
||||
provider,
|
||||
status: 'degraded',
|
||||
message: 'Unable to check service status',
|
||||
incidents: ['Error checking service status'],
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setServiceStatuses(statuses);
|
||||
} catch (err) {
|
||||
console.error('Error checking provider statuses:', err);
|
||||
setError('Failed to check service statuses');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAllProviders();
|
||||
|
||||
// Set up periodic checks every 5 minutes
|
||||
const interval = setInterval(checkAllProviders, 5 * 60 * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const getStatusColor = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'text-green-500 dark:text-green-400';
|
||||
case 'degraded':
|
||||
return 'text-yellow-500 dark:text-yellow-400';
|
||||
case 'down':
|
||||
return 'text-red-500 dark:text-red-400';
|
||||
default:
|
||||
return 'text-gray-500 dark:text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'i-ph:check-circle';
|
||||
case 'degraded':
|
||||
return 'i-ph:warning';
|
||||
case 'down':
|
||||
return 'i-ph:x-circle';
|
||||
default:
|
||||
return 'i-ph:question';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="animate-spin i-ph:circle-notch w-8 h-8 text-purple-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-red-500 dark:text-red-400">
|
||||
<div className="i-ph:warning w-8 h-8 mb-2" />
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{serviceStatuses.map((service) => (
|
||||
<div
|
||||
key={service.provider}
|
||||
className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{service.provider}</h3>
|
||||
<div className={`flex items-center ${getStatusColor(service.status)}`}>
|
||||
<div className={`${getStatusIcon(service.status)} w-5 h-5 mr-2`} />
|
||||
<span className="capitalize">{service.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-2">{service.message}</p>
|
||||
{service.incidents && service.incidents.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Recent Incidents:</h4>
|
||||
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||
{service.incidents.map((incident, index) => (
|
||||
<li key={index}>{incident}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
Last checked: {new Date(service.lastChecked).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import type { ProviderConfig, StatusCheckResult, ApiResponse } from './types';
|
||||
|
||||
export abstract class BaseProviderChecker {
|
||||
protected config: ProviderConfig;
|
||||
|
||||
constructor(config: ProviderConfig) {
|
||||
this.config = config;
|
||||
}
|
||||
|
||||
protected async checkApiEndpoint(
|
||||
url: string,
|
||||
headers?: Record<string, string>,
|
||||
testModel?: string,
|
||||
): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> {
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000);
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
// Add common headers
|
||||
const processedHeaders = {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
};
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: processedHeaders,
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
const endTime = performance.now();
|
||||
const responseTime = endTime - startTime;
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
const data = (await response.json()) as ApiResponse;
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `API returned status: ${response.status}`;
|
||||
|
||||
if (data.error?.message) {
|
||||
errorMessage = data.error.message;
|
||||
} else if (data.message) {
|
||||
errorMessage = data.message;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: false,
|
||||
status: response.status,
|
||||
message: errorMessage,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
// Different providers have different model list formats
|
||||
let models: string[] = [];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
|
||||
} else if (data.data && Array.isArray(data.data)) {
|
||||
models = data.data.map((model) => model.id || model.name || '');
|
||||
} else if (data.models && Array.isArray(data.models)) {
|
||||
models = data.models.map((model) => model.id || model.name || '');
|
||||
} else if (data.model) {
|
||||
models = [data.model];
|
||||
}
|
||||
|
||||
if (!testModel || models.length > 0) {
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
responseTime,
|
||||
message: 'API key is valid',
|
||||
};
|
||||
}
|
||||
|
||||
if (testModel && !models.includes(testModel)) {
|
||||
return {
|
||||
ok: true,
|
||||
status: 'model_not_found',
|
||||
message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
message: 'API key is valid',
|
||||
responseTime,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error checking API endpoint ${url}:`, error);
|
||||
return {
|
||||
ok: false,
|
||||
status: error instanceof Error ? error.message : 'Unknown error',
|
||||
message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
|
||||
responseTime: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
protected async checkEndpoint(url: string): Promise<'reachable' | 'unreachable'> {
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
mode: 'no-cors',
|
||||
headers: {
|
||||
Accept: 'text/html',
|
||||
},
|
||||
});
|
||||
return response.type === 'opaque' ? 'reachable' : 'unreachable';
|
||||
} catch (error) {
|
||||
console.error(`Error checking ${url}:`, error);
|
||||
return 'unreachable';
|
||||
}
|
||||
}
|
||||
|
||||
abstract checkStatus(): Promise<StatusCheckResult>;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import type { ProviderName, ProviderConfig, StatusCheckResult } from './types';
|
||||
import { BaseProviderChecker } from './base-provider';
|
||||
|
||||
import { AmazonBedrockStatusChecker } from './providers/amazon-bedrock';
|
||||
import { CohereStatusChecker } from './providers/cohere';
|
||||
import { DeepseekStatusChecker } from './providers/deepseek';
|
||||
import { GoogleStatusChecker } from './providers/google';
|
||||
import { GroqStatusChecker } from './providers/groq';
|
||||
import { HuggingFaceStatusChecker } from './providers/huggingface';
|
||||
import { HyperbolicStatusChecker } from './providers/hyperbolic';
|
||||
import { MistralStatusChecker } from './providers/mistral';
|
||||
import { OpenRouterStatusChecker } from './providers/openrouter';
|
||||
import { PerplexityStatusChecker } from './providers/perplexity';
|
||||
import { TogetherStatusChecker } from './providers/together';
|
||||
import { XAIStatusChecker } from './providers/xai';
|
||||
|
||||
export class ProviderStatusCheckerFactory {
|
||||
private static _providerConfigs: Record<ProviderName, ProviderConfig> = {
|
||||
AmazonBedrock: {
|
||||
statusUrl: 'https://health.aws.amazon.com/health/status',
|
||||
apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
|
||||
headers: {},
|
||||
testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
|
||||
},
|
||||
Cohere: {
|
||||
statusUrl: 'https://status.cohere.com/',
|
||||
apiUrl: 'https://api.cohere.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'command',
|
||||
},
|
||||
Deepseek: {
|
||||
statusUrl: 'https://status.deepseek.com/',
|
||||
apiUrl: 'https://api.deepseek.com/v1/models',
|
||||
headers: {},
|
||||
testModel: 'deepseek-chat',
|
||||
},
|
||||
Google: {
|
||||
statusUrl: 'https://status.cloud.google.com/',
|
||||
apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
|
||||
headers: {},
|
||||
testModel: 'gemini-pro',
|
||||
},
|
||||
Groq: {
|
||||
statusUrl: 'https://groqstatus.com/',
|
||||
apiUrl: 'https://api.groq.com/v1/models',
|
||||
headers: {},
|
||||
testModel: 'mixtral-8x7b-32768',
|
||||
},
|
||||
HuggingFace: {
|
||||
statusUrl: 'https://status.huggingface.co/',
|
||||
apiUrl: 'https://api-inference.huggingface.co/models',
|
||||
headers: {},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
Hyperbolic: {
|
||||
statusUrl: 'https://status.hyperbolic.ai/',
|
||||
apiUrl: 'https://api.hyperbolic.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'hyperbolic-1',
|
||||
},
|
||||
Mistral: {
|
||||
statusUrl: 'https://status.mistral.ai/',
|
||||
apiUrl: 'https://api.mistral.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'mistral-tiny',
|
||||
},
|
||||
OpenRouter: {
|
||||
statusUrl: 'https://status.openrouter.ai/',
|
||||
apiUrl: 'https://openrouter.ai/api/v1/models',
|
||||
headers: {},
|
||||
testModel: 'anthropic/claude-3-sonnet',
|
||||
},
|
||||
Perplexity: {
|
||||
statusUrl: 'https://status.perplexity.com/',
|
||||
apiUrl: 'https://api.perplexity.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'pplx-7b-chat',
|
||||
},
|
||||
Together: {
|
||||
statusUrl: 'https://status.together.ai/',
|
||||
apiUrl: 'https://api.together.xyz/v1/models',
|
||||
headers: {},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
XAI: {
|
||||
statusUrl: 'https://status.x.ai/',
|
||||
apiUrl: 'https://api.x.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'grok-1',
|
||||
},
|
||||
};
|
||||
|
||||
static getChecker(provider: ProviderName): BaseProviderChecker {
|
||||
const config = this._providerConfigs[provider];
|
||||
|
||||
if (!config) {
|
||||
throw new Error(`No configuration found for provider: ${provider}`);
|
||||
}
|
||||
|
||||
switch (provider) {
|
||||
case 'AmazonBedrock':
|
||||
return new AmazonBedrockStatusChecker(config);
|
||||
case 'Cohere':
|
||||
return new CohereStatusChecker(config);
|
||||
case 'Deepseek':
|
||||
return new DeepseekStatusChecker(config);
|
||||
case 'Google':
|
||||
return new GoogleStatusChecker(config);
|
||||
case 'Groq':
|
||||
return new GroqStatusChecker(config);
|
||||
case 'HuggingFace':
|
||||
return new HuggingFaceStatusChecker(config);
|
||||
case 'Hyperbolic':
|
||||
return new HyperbolicStatusChecker(config);
|
||||
case 'Mistral':
|
||||
return new MistralStatusChecker(config);
|
||||
case 'OpenRouter':
|
||||
return new OpenRouterStatusChecker(config);
|
||||
case 'Perplexity':
|
||||
return new PerplexityStatusChecker(config);
|
||||
case 'Together':
|
||||
return new TogetherStatusChecker(config);
|
||||
case 'XAI':
|
||||
return new XAIStatusChecker(config);
|
||||
default:
|
||||
return new (class extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
const endpointStatus = await this.checkEndpoint(this.config.statusUrl);
|
||||
const apiStatus = await this.checkEndpoint(this.config.apiUrl);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
})(config);
|
||||
}
|
||||
}
|
||||
|
||||
static getProviderNames(): ProviderName[] {
|
||||
return Object.keys(this._providerConfigs) as ProviderName[];
|
||||
}
|
||||
|
||||
static getProviderConfig(provider: ProviderName): ProviderConfig {
|
||||
const config = this._providerConfigs[provider];
|
||||
|
||||
if (!config) {
|
||||
throw new Error(`Unknown provider: ${provider}`);
|
||||
}
|
||||
|
||||
return config;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class AmazonBedrockStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check AWS health status page
|
||||
const statusPageResponse = await fetch('https://health.aws.amazon.com/health/status');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for Bedrock and general AWS status
|
||||
const hasBedrockIssues =
|
||||
text.includes('Amazon Bedrock') &&
|
||||
(text.includes('Service is experiencing elevated error rates') ||
|
||||
text.includes('Service disruption') ||
|
||||
text.includes('Degraded Service'));
|
||||
|
||||
const hasGeneralIssues = text.includes('Service disruption') || text.includes('Multiple services affected');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
|
||||
|
||||
for (const match of incidentMatches) {
|
||||
const [, date, title, impact] = match;
|
||||
|
||||
if (title.includes('Bedrock') || title.includes('AWS')) {
|
||||
incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
|
||||
}
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All services operational';
|
||||
|
||||
if (hasBedrockIssues) {
|
||||
status = 'degraded';
|
||||
message = 'Amazon Bedrock service issues reported';
|
||||
} else if (hasGeneralIssues) {
|
||||
status = 'degraded';
|
||||
message = 'AWS experiencing general issues';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
|
||||
const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: incidents.slice(0, 5),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Amazon Bedrock status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
|
||||
const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class AnthropicStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.anthropic.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Anthropic status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasDegradedPerformance = text.includes('Degraded Performance');
|
||||
const hasPartialOutage = text.includes('Partial Outage');
|
||||
const hasMajorOutage = text.includes('Major Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (hasMajorOutage) {
|
||||
status = 'down';
|
||||
message = 'Major service outage';
|
||||
} else if (hasPartialOutage) {
|
||||
status = 'down';
|
||||
message = 'Partial service outage';
|
||||
} else if (hasDegradedPerformance) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing degraded performance';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
|
||||
const apiEndpoint = 'https://api.anthropic.com/v1/messages';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Anthropic status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
|
||||
const apiEndpoint = 'https://api.anthropic.com/v1/messages';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class CohereStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.cohere.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Cohere status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
generation: {
|
||||
operational: text.includes('Generation Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Generation Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Generation Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.generation.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.generation.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
|
||||
const apiEndpoint = 'https://api.cohere.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Cohere status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
|
||||
const apiEndpoint = 'https://api.cohere.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class DeepseekStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
/*
|
||||
* Check status page - Note: Deepseek doesn't have a public status page yet
|
||||
* so we'll check their API endpoint directly
|
||||
*/
|
||||
const apiEndpoint = 'https://api.deepseek.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
// Check their website as a secondary indicator
|
||||
const websiteStatus = await this.checkEndpoint('https://deepseek.com');
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
|
||||
status = apiStatus !== 'reachable' ? 'down' : 'degraded';
|
||||
message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: [], // No public incident tracking available yet
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Deepseek status:', error);
|
||||
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to determine service status',
|
||||
incidents: ['Note: Limited status information available'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class GoogleStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.cloud.google.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for Vertex AI and general cloud status
|
||||
const hasVertexAIIssues =
|
||||
text.includes('Vertex AI') &&
|
||||
(text.includes('Incident') ||
|
||||
text.includes('Disruption') ||
|
||||
text.includes('Outage') ||
|
||||
text.includes('degraded'));
|
||||
|
||||
const hasGeneralIssues = text.includes('Major Incidents') || text.includes('Service Disruption');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
|
||||
|
||||
for (const match of incidentMatches) {
|
||||
const [, date, title, impact] = match;
|
||||
|
||||
if (title.includes('Vertex AI') || title.includes('Cloud')) {
|
||||
incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
|
||||
}
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All services operational';
|
||||
|
||||
if (hasVertexAIIssues) {
|
||||
status = 'degraded';
|
||||
message = 'Vertex AI service issues reported';
|
||||
} else if (hasGeneralIssues) {
|
||||
status = 'degraded';
|
||||
message = 'Google Cloud experiencing issues';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
|
||||
const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: incidents.slice(0, 5),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Google status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
|
||||
const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class GroqStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://groqstatus.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Status:(.*?)(?=\n|$)/g);
|
||||
|
||||
for (const match of incidentMatches) {
|
||||
const [, date, title, status] = match;
|
||||
incidents.push(`${date}: ${title.trim()} - ${status.trim()}`);
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
|
||||
const apiEndpoint = 'https://api.groq.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: incidents.slice(0, 5),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Groq status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
|
||||
const apiEndpoint = 'https://api.groq.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class HuggingFaceStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.huggingface.co/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for "All services are online" message
|
||||
const allServicesOnline = text.includes('All services are online');
|
||||
|
||||
// Get last update time
|
||||
const lastUpdateMatch = text.match(/Last updated on (.*?)(EST|PST|GMT)/);
|
||||
const lastUpdate = lastUpdateMatch ? `${lastUpdateMatch[1]}${lastUpdateMatch[2]}` : '';
|
||||
|
||||
// Check individual services and their uptime percentages
|
||||
const services = {
|
||||
'Huggingface Hub': {
|
||||
operational: text.includes('Huggingface Hub') && text.includes('Operational'),
|
||||
uptime: text.match(/Huggingface Hub[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
'Git Hosting and Serving': {
|
||||
operational: text.includes('Git Hosting and Serving') && text.includes('Operational'),
|
||||
uptime: text.match(/Git Hosting and Serving[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
'Inference API': {
|
||||
operational: text.includes('Inference API') && text.includes('Operational'),
|
||||
uptime: text.match(/Inference API[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
'HF Endpoints': {
|
||||
operational: text.includes('HF Endpoints') && text.includes('Operational'),
|
||||
uptime: text.match(/HF Endpoints[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
Spaces: {
|
||||
operational: text.includes('Spaces') && text.includes('Operational'),
|
||||
uptime: text.match(/Spaces[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
};
|
||||
|
||||
// Create service status messages with uptime
|
||||
const serviceMessages = Object.entries(services).map(([name, info]) => {
|
||||
if (info.uptime) {
|
||||
return `${name}: ${info.uptime}% uptime`;
|
||||
}
|
||||
|
||||
return `${name}: ${info.operational ? 'Operational' : 'Issues detected'}`;
|
||||
});
|
||||
|
||||
// Determine overall status
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = allServicesOnline
|
||||
? `All services are online (Last updated on ${lastUpdate})`
|
||||
: 'Checking individual services';
|
||||
|
||||
// Only mark as degraded if we explicitly detect issues
|
||||
const hasIssues = Object.values(services).some((service) => !service.operational);
|
||||
|
||||
if (hasIssues) {
|
||||
status = 'degraded';
|
||||
message = `Service issues detected (Last updated on ${lastUpdate})`;
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
|
||||
const apiEndpoint = 'https://api-inference.huggingface.co/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: serviceMessages,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking HuggingFace status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
|
||||
const apiEndpoint = 'https://api-inference.huggingface.co/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class HyperbolicStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
/*
|
||||
* Check API endpoint directly since Hyperbolic is a newer provider
|
||||
* and may not have a public status page yet
|
||||
*/
|
||||
const apiEndpoint = 'https://api.hyperbolic.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
// Check their website as a secondary indicator
|
||||
const websiteStatus = await this.checkEndpoint('https://hyperbolic.ai');
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
|
||||
status = apiStatus !== 'reachable' ? 'down' : 'degraded';
|
||||
message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: [], // No public incident tracking available yet
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Hyperbolic status:', error);
|
||||
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to determine service status',
|
||||
incidents: ['Note: Limited status information available'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class MistralStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.mistral.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Recent Events(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && !line.includes('No incidents'));
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.mistral.ai/');
|
||||
const apiEndpoint = 'https://api.mistral.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Mistral status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.mistral.ai/');
|
||||
const apiEndpoint = 'https://api.mistral.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class OpenAIStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.openai.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check individual services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API ? Operational'),
|
||||
degraded: text.includes('API ? Degraded Performance'),
|
||||
outage: text.includes('API ? Major Outage') || text.includes('API ? Partial Outage'),
|
||||
},
|
||||
chat: {
|
||||
operational: text.includes('ChatGPT ? Operational'),
|
||||
degraded: text.includes('ChatGPT ? Degraded Performance'),
|
||||
outage: text.includes('ChatGPT ? Major Outage') || text.includes('ChatGPT ? Partial Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
// Extract recent incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.match(/Past Incidents(.*?)(?=\w+ \d+, \d{4})/s);
|
||||
|
||||
if (incidentMatches) {
|
||||
const recentIncidents = incidentMatches[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Get only dated incidents
|
||||
|
||||
incidents.push(...recentIncidents.slice(0, 5));
|
||||
}
|
||||
|
||||
// Determine overall status
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
const messages: string[] = [];
|
||||
|
||||
if (services.api.outage || services.chat.outage) {
|
||||
status = 'down';
|
||||
|
||||
if (services.api.outage) {
|
||||
messages.push('API: Major Outage');
|
||||
}
|
||||
|
||||
if (services.chat.outage) {
|
||||
messages.push('ChatGPT: Major Outage');
|
||||
}
|
||||
} else if (services.api.degraded || services.chat.degraded) {
|
||||
status = 'degraded';
|
||||
|
||||
if (services.api.degraded) {
|
||||
messages.push('API: Degraded Performance');
|
||||
}
|
||||
|
||||
if (services.chat.degraded) {
|
||||
messages.push('ChatGPT: Degraded Performance');
|
||||
}
|
||||
} else if (services.api.operational) {
|
||||
messages.push('API: Operational');
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openai.com/');
|
||||
const apiEndpoint = 'https://api.openai.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message: messages.join(', ') || 'Status unknown',
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking OpenAI status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openai.com/');
|
||||
const apiEndpoint = 'https://api.openai.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class OpenRouterStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.openrouter.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific OpenRouter status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
routing: {
|
||||
operational: text.includes('Routing Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Routing Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Routing Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.routing.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.routing.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openrouter.ai/');
|
||||
const apiEndpoint = 'https://openrouter.ai/api/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking OpenRouter status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openrouter.ai/');
|
||||
const apiEndpoint = 'https://openrouter.ai/api/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class PerplexityStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.perplexity.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Perplexity status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
inference: {
|
||||
operational: text.includes('Inference Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Inference Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Inference Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.inference.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.inference.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.perplexity.ai/');
|
||||
const apiEndpoint = 'https://api.perplexity.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Perplexity status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.perplexity.ai/');
|
||||
const apiEndpoint = 'https://api.perplexity.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class TogetherStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.together.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Together status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
inference: {
|
||||
operational: text.includes('Inference Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Inference Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Inference Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.inference.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.inference.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.together.ai/');
|
||||
const apiEndpoint = 'https://api.together.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Together status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.together.ai/');
|
||||
const apiEndpoint = 'https://api.together.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class XAIStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
/*
|
||||
* Check API endpoint directly since XAI is a newer provider
|
||||
* and may not have a public status page yet
|
||||
*/
|
||||
const apiEndpoint = 'https://api.xai.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
// Check their website as a secondary indicator
|
||||
const websiteStatus = await this.checkEndpoint('https://x.ai');
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
|
||||
status = apiStatus !== 'reachable' ? 'down' : 'degraded';
|
||||
message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: [], // No public incident tracking available yet
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking XAI status:', error);
|
||||
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to determine service status',
|
||||
incidents: ['Note: Limited status information available'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { IconType } from 'react-icons';
|
||||
|
||||
export type ProviderName =
|
||||
| 'AmazonBedrock'
|
||||
| 'Cohere'
|
||||
| 'Deepseek'
|
||||
| 'Google'
|
||||
| 'Groq'
|
||||
| 'HuggingFace'
|
||||
| 'Hyperbolic'
|
||||
| 'Mistral'
|
||||
| 'OpenRouter'
|
||||
| 'Perplexity'
|
||||
| 'Together'
|
||||
| 'XAI';
|
||||
|
||||
export type ServiceStatus = {
|
||||
provider: ProviderName;
|
||||
status: 'operational' | 'degraded' | 'down';
|
||||
lastChecked: string;
|
||||
statusUrl?: string;
|
||||
icon?: IconType;
|
||||
message?: string;
|
||||
responseTime?: number;
|
||||
incidents?: string[];
|
||||
};
|
||||
|
||||
export interface ProviderConfig {
|
||||
statusUrl: string;
|
||||
apiUrl: string;
|
||||
headers: Record<string, string>;
|
||||
testModel: string;
|
||||
}
|
||||
|
||||
export type ApiResponse = {
|
||||
error?: {
|
||||
message: string;
|
||||
};
|
||||
message?: string;
|
||||
model?: string;
|
||||
models?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
data?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type StatusCheckResult = {
|
||||
status: 'operational' | 'degraded' | 'down';
|
||||
message: string;
|
||||
incidents: string[];
|
||||
};
|
||||
@@ -0,0 +1,886 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { TbActivityHeartbeat } from 'react-icons/tb';
|
||||
import { BsCheckCircleFill, BsXCircleFill, BsExclamationCircleFill } from 'react-icons/bs';
|
||||
import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
|
||||
import { BsRobot, BsCloud } from 'react-icons/bs';
|
||||
import { TbBrain } from 'react-icons/tb';
|
||||
import { BiChip, BiCodeBlock } from 'react-icons/bi';
|
||||
import { FaCloud, FaBrain } from 'react-icons/fa';
|
||||
import type { IconType } from 'react-icons';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { useToast } from '~/components/ui/use-toast';
|
||||
|
||||
// Types
|
||||
type ProviderName =
|
||||
| 'AmazonBedrock'
|
||||
| 'Anthropic'
|
||||
| 'Cohere'
|
||||
| 'Deepseek'
|
||||
| 'Google'
|
||||
| 'Groq'
|
||||
| 'HuggingFace'
|
||||
| 'Mistral'
|
||||
| 'OpenAI'
|
||||
| 'OpenRouter'
|
||||
| 'Perplexity'
|
||||
| 'Together'
|
||||
| 'XAI';
|
||||
|
||||
type ServiceStatus = {
|
||||
provider: ProviderName;
|
||||
status: 'operational' | 'degraded' | 'down';
|
||||
lastChecked: string;
|
||||
statusUrl?: string;
|
||||
icon?: IconType;
|
||||
message?: string;
|
||||
responseTime?: number;
|
||||
incidents?: string[];
|
||||
};
|
||||
|
||||
type ProviderConfig = {
|
||||
statusUrl: string;
|
||||
apiUrl: string;
|
||||
headers: Record<string, string>;
|
||||
testModel: string;
|
||||
};
|
||||
|
||||
// Types for API responses
|
||||
type ApiResponse = {
|
||||
error?: {
|
||||
message: string;
|
||||
};
|
||||
message?: string;
|
||||
model?: string;
|
||||
models?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
data?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
// Constants
|
||||
const PROVIDER_STATUS_URLS: Record<ProviderName, ProviderConfig> = {
|
||||
OpenAI: {
|
||||
statusUrl: 'https://status.openai.com/',
|
||||
apiUrl: 'https://api.openai.com/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $OPENAI_API_KEY',
|
||||
},
|
||||
testModel: 'gpt-3.5-turbo',
|
||||
},
|
||||
Anthropic: {
|
||||
statusUrl: 'https://status.anthropic.com/',
|
||||
apiUrl: 'https://api.anthropic.com/v1/messages',
|
||||
headers: {
|
||||
'x-api-key': '$ANTHROPIC_API_KEY',
|
||||
'anthropic-version': '2024-02-29',
|
||||
},
|
||||
testModel: 'claude-3-sonnet-20240229',
|
||||
},
|
||||
Cohere: {
|
||||
statusUrl: 'https://status.cohere.com/',
|
||||
apiUrl: 'https://api.cohere.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $COHERE_API_KEY',
|
||||
},
|
||||
testModel: 'command',
|
||||
},
|
||||
Google: {
|
||||
statusUrl: 'https://status.cloud.google.com/',
|
||||
apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
|
||||
headers: {
|
||||
'x-goog-api-key': '$GOOGLE_API_KEY',
|
||||
},
|
||||
testModel: 'gemini-pro',
|
||||
},
|
||||
HuggingFace: {
|
||||
statusUrl: 'https://status.huggingface.co/',
|
||||
apiUrl: 'https://api-inference.huggingface.co/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $HUGGINGFACE_API_KEY',
|
||||
},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
Mistral: {
|
||||
statusUrl: 'https://status.mistral.ai/',
|
||||
apiUrl: 'https://api.mistral.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $MISTRAL_API_KEY',
|
||||
},
|
||||
testModel: 'mistral-tiny',
|
||||
},
|
||||
Perplexity: {
|
||||
statusUrl: 'https://status.perplexity.com/',
|
||||
apiUrl: 'https://api.perplexity.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $PERPLEXITY_API_KEY',
|
||||
},
|
||||
testModel: 'pplx-7b-chat',
|
||||
},
|
||||
Together: {
|
||||
statusUrl: 'https://status.together.ai/',
|
||||
apiUrl: 'https://api.together.xyz/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $TOGETHER_API_KEY',
|
||||
},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
AmazonBedrock: {
|
||||
statusUrl: 'https://health.aws.amazon.com/health/status',
|
||||
apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $AWS_BEDROCK_CONFIG',
|
||||
},
|
||||
testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
|
||||
},
|
||||
Groq: {
|
||||
statusUrl: 'https://groqstatus.com/',
|
||||
apiUrl: 'https://api.groq.com/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $GROQ_API_KEY',
|
||||
},
|
||||
testModel: 'mixtral-8x7b-32768',
|
||||
},
|
||||
OpenRouter: {
|
||||
statusUrl: 'https://status.openrouter.ai/',
|
||||
apiUrl: 'https://openrouter.ai/api/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $OPEN_ROUTER_API_KEY',
|
||||
},
|
||||
testModel: 'anthropic/claude-3-sonnet',
|
||||
},
|
||||
XAI: {
|
||||
statusUrl: 'https://status.x.ai/',
|
||||
apiUrl: 'https://api.x.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $XAI_API_KEY',
|
||||
},
|
||||
testModel: 'grok-1',
|
||||
},
|
||||
Deepseek: {
|
||||
statusUrl: 'https://status.deepseek.com/',
|
||||
apiUrl: 'https://api.deepseek.com/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $DEEPSEEK_API_KEY',
|
||||
},
|
||||
testModel: 'deepseek-chat',
|
||||
},
|
||||
};
|
||||
|
||||
const PROVIDER_ICONS: Record<ProviderName, IconType> = {
|
||||
AmazonBedrock: SiAmazon,
|
||||
Anthropic: FaBrain,
|
||||
Cohere: BiChip,
|
||||
Google: SiGoogle,
|
||||
Groq: BsCloud,
|
||||
HuggingFace: SiHuggingface,
|
||||
Mistral: TbBrain,
|
||||
OpenAI: SiOpenai,
|
||||
OpenRouter: FaCloud,
|
||||
Perplexity: SiPerplexity,
|
||||
Together: BsCloud,
|
||||
XAI: BsRobot,
|
||||
Deepseek: BiCodeBlock,
|
||||
};
|
||||
|
||||
const ServiceStatusTab = () => {
|
||||
const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
|
||||
const [testApiKey, setTestApiKey] = useState<string>('');
|
||||
const [testProvider, setTestProvider] = useState<ProviderName | ''>('');
|
||||
const [testingStatus, setTestingStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle');
|
||||
const settings = useSettings();
|
||||
const { success, error } = useToast();
|
||||
|
||||
// Function to get the API key for a provider from environment variables
|
||||
const getApiKey = useCallback(
|
||||
(provider: ProviderName): string | null => {
|
||||
if (!settings.providers) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Map provider names to environment variable names
|
||||
const envKeyMap: Record<ProviderName, string> = {
|
||||
OpenAI: 'OPENAI_API_KEY',
|
||||
Anthropic: 'ANTHROPIC_API_KEY',
|
||||
Cohere: 'COHERE_API_KEY',
|
||||
Google: 'GOOGLE_GENERATIVE_AI_API_KEY',
|
||||
HuggingFace: 'HuggingFace_API_KEY',
|
||||
Mistral: 'MISTRAL_API_KEY',
|
||||
Perplexity: 'PERPLEXITY_API_KEY',
|
||||
Together: 'TOGETHER_API_KEY',
|
||||
AmazonBedrock: 'AWS_BEDROCK_CONFIG',
|
||||
Groq: 'GROQ_API_KEY',
|
||||
OpenRouter: 'OPEN_ROUTER_API_KEY',
|
||||
XAI: 'XAI_API_KEY',
|
||||
Deepseek: 'DEEPSEEK_API_KEY',
|
||||
};
|
||||
|
||||
const envKey = envKeyMap[provider];
|
||||
|
||||
if (!envKey) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get the API key from environment variables
|
||||
const apiKey = (import.meta.env[envKey] as string) || null;
|
||||
|
||||
// Special handling for providers with base URLs
|
||||
if (provider === 'Together' && apiKey) {
|
||||
const baseUrl = import.meta.env.TOGETHER_API_BASE_URL;
|
||||
|
||||
if (!baseUrl) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return apiKey;
|
||||
},
|
||||
[settings.providers],
|
||||
);
|
||||
|
||||
// Update provider configurations based on available API keys
|
||||
const getProviderConfig = useCallback((provider: ProviderName): ProviderConfig | null => {
|
||||
const config = PROVIDER_STATUS_URLS[provider];
|
||||
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Handle special cases for providers with base URLs
|
||||
let updatedConfig = { ...config };
|
||||
const togetherBaseUrl = import.meta.env.TOGETHER_API_BASE_URL;
|
||||
|
||||
if (provider === 'Together' && togetherBaseUrl) {
|
||||
updatedConfig = {
|
||||
...config,
|
||||
apiUrl: `${togetherBaseUrl}/models`,
|
||||
};
|
||||
}
|
||||
|
||||
return updatedConfig;
|
||||
}, []);
|
||||
|
||||
// Function to check if an API endpoint is accessible with model verification
|
||||
const checkApiEndpoint = useCallback(
|
||||
async (
|
||||
url: string,
|
||||
headers?: Record<string, string>,
|
||||
testModel?: string,
|
||||
): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> => {
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000);
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
// Add common headers
|
||||
const processedHeaders = {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
};
|
||||
|
||||
// First check if the API is accessible
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: processedHeaders,
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
const endTime = performance.now();
|
||||
const responseTime = endTime - startTime;
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// Get response data
|
||||
const data = (await response.json()) as ApiResponse;
|
||||
|
||||
// Special handling for different provider responses
|
||||
if (!response.ok) {
|
||||
let errorMessage = `API returned status: ${response.status}`;
|
||||
|
||||
// Handle provider-specific error messages
|
||||
if (data.error?.message) {
|
||||
errorMessage = data.error.message;
|
||||
} else if (data.message) {
|
||||
errorMessage = data.message;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: false,
|
||||
status: response.status,
|
||||
message: errorMessage,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
// Different providers have different model list formats
|
||||
let models: string[] = [];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
|
||||
} else if (data.data && Array.isArray(data.data)) {
|
||||
models = data.data.map((model) => model.id || model.name || '');
|
||||
} else if (data.models && Array.isArray(data.models)) {
|
||||
models = data.models.map((model) => model.id || model.name || '');
|
||||
} else if (data.model) {
|
||||
// Some providers return single model info
|
||||
models = [data.model];
|
||||
}
|
||||
|
||||
// For some providers, just having a successful response is enough
|
||||
if (!testModel || models.length > 0) {
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
responseTime,
|
||||
message: 'API key is valid',
|
||||
};
|
||||
}
|
||||
|
||||
// If a specific model was requested, verify it exists
|
||||
if (testModel && !models.includes(testModel)) {
|
||||
return {
|
||||
ok: true, // Still mark as ok since API works
|
||||
status: 'model_not_found',
|
||||
message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
message: 'API key is valid',
|
||||
responseTime,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error checking API endpoint ${url}:`, error);
|
||||
return {
|
||||
ok: false,
|
||||
status: error instanceof Error ? error.message : 'Unknown error',
|
||||
message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
|
||||
responseTime: 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
[getApiKey],
|
||||
);
|
||||
|
||||
// Function to fetch real status from provider status pages
|
||||
const fetchPublicStatus = useCallback(
|
||||
async (
|
||||
provider: ProviderName,
|
||||
): Promise<{
|
||||
status: ServiceStatus['status'];
|
||||
message?: string;
|
||||
incidents?: string[];
|
||||
}> => {
|
||||
try {
|
||||
// Due to CORS restrictions, we can only check if the endpoints are reachable
|
||||
const checkEndpoint = async (url: string) => {
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
mode: 'no-cors',
|
||||
headers: {
|
||||
Accept: 'text/html',
|
||||
},
|
||||
});
|
||||
|
||||
// With no-cors, we can only know if the request succeeded
|
||||
return response.type === 'opaque' ? 'reachable' : 'unreachable';
|
||||
} catch (error) {
|
||||
console.error(`Error checking ${url}:`, error);
|
||||
return 'unreachable';
|
||||
}
|
||||
};
|
||||
|
||||
switch (provider) {
|
||||
case 'HuggingFace': {
|
||||
const endpointStatus = await checkEndpoint('https://status.huggingface.co/');
|
||||
|
||||
// Check API endpoint as fallback
|
||||
const apiEndpoint = 'https://api-inference.huggingface.co/models';
|
||||
const apiStatus = await checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
case 'OpenAI': {
|
||||
const endpointStatus = await checkEndpoint('https://status.openai.com/');
|
||||
const apiEndpoint = 'https://api.openai.com/v1/models';
|
||||
const apiStatus = await checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
case 'Google': {
|
||||
const endpointStatus = await checkEndpoint('https://status.cloud.google.com/');
|
||||
const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
|
||||
const apiStatus = await checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
// Similar pattern for other providers...
|
||||
default:
|
||||
return {
|
||||
status: 'operational',
|
||||
message: 'Basic reachability check only',
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error fetching status for ${provider}:`, error);
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to fetch status due to CORS restrictions',
|
||||
incidents: ['Error: Unable to check service status'],
|
||||
};
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Function to fetch status for a provider with retries
|
||||
const fetchProviderStatus = useCallback(
|
||||
async (provider: ProviderName, config: ProviderConfig): Promise<ServiceStatus> => {
|
||||
const MAX_RETRIES = 2;
|
||||
const RETRY_DELAY = 2000; // 2 seconds
|
||||
|
||||
const attemptCheck = async (attempt: number): Promise<ServiceStatus> => {
|
||||
try {
|
||||
// First check the public status page if available
|
||||
const hasPublicStatus = [
|
||||
'Anthropic',
|
||||
'OpenAI',
|
||||
'Google',
|
||||
'HuggingFace',
|
||||
'Mistral',
|
||||
'Groq',
|
||||
'Perplexity',
|
||||
'Together',
|
||||
].includes(provider);
|
||||
|
||||
if (hasPublicStatus) {
|
||||
const publicStatus = await fetchPublicStatus(provider);
|
||||
|
||||
return {
|
||||
provider,
|
||||
status: publicStatus.status,
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: config.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: publicStatus.message,
|
||||
incidents: publicStatus.incidents,
|
||||
};
|
||||
}
|
||||
|
||||
// For other providers, we'll show status but mark API check as separate
|
||||
const apiKey = getApiKey(provider);
|
||||
const providerConfig = getProviderConfig(provider);
|
||||
|
||||
if (!apiKey || !providerConfig) {
|
||||
return {
|
||||
provider,
|
||||
status: 'operational',
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: config.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: !apiKey
|
||||
? 'Status operational (API key needed for usage)'
|
||||
: 'Status operational (configuration needed for usage)',
|
||||
incidents: [],
|
||||
};
|
||||
}
|
||||
|
||||
// If we have API access, let's verify that too
|
||||
const { ok, status, message, responseTime } = await checkApiEndpoint(
|
||||
providerConfig.apiUrl,
|
||||
providerConfig.headers,
|
||||
providerConfig.testModel,
|
||||
);
|
||||
|
||||
if (!ok && attempt < MAX_RETRIES) {
|
||||
await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
|
||||
return attemptCheck(attempt + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
provider,
|
||||
status: ok ? 'operational' : 'degraded',
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: providerConfig.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: ok ? 'Service and API operational' : `Service operational (API: ${message || status})`,
|
||||
responseTime,
|
||||
incidents: [],
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error fetching status for ${provider} (attempt ${attempt}):`, error);
|
||||
|
||||
if (attempt < MAX_RETRIES) {
|
||||
await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
|
||||
return attemptCheck(attempt + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
provider,
|
||||
status: 'degraded',
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: config.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: 'Service operational (Status check error)',
|
||||
responseTime: 0,
|
||||
incidents: [],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return attemptCheck(1);
|
||||
},
|
||||
[checkApiEndpoint, getApiKey, getProviderConfig, fetchPublicStatus],
|
||||
);
|
||||
|
||||
// Memoize the fetchAllStatuses function
|
||||
const fetchAllStatuses = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const statuses = await Promise.all(
|
||||
Object.entries(PROVIDER_STATUS_URLS).map(([provider, config]) =>
|
||||
fetchProviderStatus(provider as ProviderName, config),
|
||||
),
|
||||
);
|
||||
|
||||
setServiceStatuses(statuses.sort((a, b) => a.provider.localeCompare(b.provider)));
|
||||
setLastRefresh(new Date());
|
||||
success('Service statuses updated successfully');
|
||||
} catch (err) {
|
||||
console.error('Error fetching all statuses:', err);
|
||||
error('Failed to update service statuses');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [fetchProviderStatus, success, error]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAllStatuses();
|
||||
|
||||
// Refresh status every 2 minutes
|
||||
const interval = setInterval(fetchAllStatuses, 2 * 60 * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [fetchAllStatuses]);
|
||||
|
||||
// Function to test an API key
|
||||
const testApiKeyForProvider = useCallback(
|
||||
async (provider: ProviderName, apiKey: string) => {
|
||||
try {
|
||||
setTestingStatus('testing');
|
||||
|
||||
const config = PROVIDER_STATUS_URLS[provider];
|
||||
|
||||
if (!config) {
|
||||
throw new Error('Provider configuration not found');
|
||||
}
|
||||
|
||||
const headers = { ...config.headers };
|
||||
|
||||
// Replace the placeholder API key with the test key
|
||||
Object.keys(headers).forEach((key) => {
|
||||
if (headers[key].startsWith('$')) {
|
||||
headers[key] = headers[key].replace(/\$.*/, apiKey);
|
||||
}
|
||||
});
|
||||
|
||||
// Special handling for certain providers
|
||||
switch (provider) {
|
||||
case 'Anthropic':
|
||||
headers['anthropic-version'] = '2024-02-29';
|
||||
break;
|
||||
case 'OpenAI':
|
||||
if (!headers.Authorization?.startsWith('Bearer ')) {
|
||||
headers.Authorization = `Bearer ${apiKey}`;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'Google': {
|
||||
// Google uses the API key directly in the URL
|
||||
const googleUrl = `${config.apiUrl}?key=${apiKey}`;
|
||||
const result = await checkApiEndpoint(googleUrl, {}, config.testModel);
|
||||
|
||||
if (result.ok) {
|
||||
setTestingStatus('success');
|
||||
success('API key is valid!');
|
||||
} else {
|
||||
setTestingStatus('error');
|
||||
error(`API key test failed: ${result.message}`);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const { ok, message } = await checkApiEndpoint(config.apiUrl, headers, config.testModel);
|
||||
|
||||
if (ok) {
|
||||
setTestingStatus('success');
|
||||
success('API key is valid!');
|
||||
} else {
|
||||
setTestingStatus('error');
|
||||
error(`API key test failed: ${message}`);
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
setTestingStatus('error');
|
||||
error('Failed to test API key: ' + (err instanceof Error ? err.message : 'Unknown error'));
|
||||
} finally {
|
||||
// Reset testing status after a delay
|
||||
setTimeout(() => setTestingStatus('idle'), 3000);
|
||||
}
|
||||
},
|
||||
[checkApiEndpoint, success, error],
|
||||
);
|
||||
|
||||
const getStatusColor = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'text-green-500';
|
||||
case 'degraded':
|
||||
return 'text-yellow-500';
|
||||
case 'down':
|
||||
return 'text-red-500';
|
||||
default:
|
||||
return 'text-gray-500';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return <BsCheckCircleFill className="w-4 h-4" />;
|
||||
case 'degraded':
|
||||
return <BsExclamationCircleFill className="w-4 h-4" />;
|
||||
case 'down':
|
||||
return <BsXCircleFill className="w-4 h-4" />;
|
||||
default:
|
||||
return <BsXCircleFill className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 mt-8 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'text-purple-500',
|
||||
)}
|
||||
>
|
||||
<TbActivityHeartbeat className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary">Service Status</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">
|
||||
Monitor and test the operational status of cloud LLM providers
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
Last updated: {lastRefresh.toLocaleTimeString()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => fetchAllStatuses()}
|
||||
className={classNames(
|
||||
'px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
loading ? 'opacity-50 cursor-not-allowed' : '',
|
||||
)}
|
||||
disabled={loading}
|
||||
>
|
||||
<div className={`i-ph:arrows-clockwise w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
<span>{loading ? 'Refreshing...' : 'Refresh'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key Test Section */}
|
||||
<div className="p-4 bg-bolt-elements-background-depth-2 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Test API Key</h5>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={testProvider}
|
||||
onChange={(e) => setTestProvider(e.target.value as ProviderName)}
|
||||
className={classNames(
|
||||
'flex-1 px-3 py-1.5 rounded-lg text-sm max-w-[200px]',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
)}
|
||||
>
|
||||
<option value="">Select Provider</option>
|
||||
{Object.keys(PROVIDER_STATUS_URLS).map((provider) => (
|
||||
<option key={provider} value={provider}>
|
||||
{provider}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="password"
|
||||
value={testApiKey}
|
||||
onChange={(e) => setTestApiKey(e.target.value)}
|
||||
placeholder="Enter API key to test"
|
||||
className={classNames(
|
||||
'flex-1 px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
testProvider && testApiKey && testApiKeyForProvider(testProvider as ProviderName, testApiKey)
|
||||
}
|
||||
disabled={!testProvider || !testApiKey || testingStatus === 'testing'}
|
||||
className={classNames(
|
||||
'px-4 py-1.5 rounded-lg text-sm',
|
||||
'bg-purple-500 hover:bg-purple-600',
|
||||
'text-white',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
!testProvider || !testApiKey || testingStatus === 'testing' ? 'opacity-50 cursor-not-allowed' : '',
|
||||
)}
|
||||
>
|
||||
{testingStatus === 'testing' ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
|
||||
<span>Testing...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:key w-4 h-4" />
|
||||
<span>Test Key</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Grid */}
|
||||
{loading && serviceStatuses.length === 0 ? (
|
||||
<div className="text-center py-8 text-bolt-elements-textSecondary">Loading service statuses...</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{serviceStatuses.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.provider}
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200',
|
||||
'relative overflow-hidden rounded-lg',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<div
|
||||
className={classNames('block p-4', service.statusUrl ? 'cursor-pointer' : '')}
|
||||
onClick={() => service.statusUrl && window.open(service.statusUrl, '_blank')}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{service.icon && (
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
getStatusColor(service.status),
|
||||
)}
|
||||
>
|
||||
{React.createElement(service.icon, {
|
||||
className: 'w-5 h-5',
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">{service.provider}</h4>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-bolt-elements-textSecondary">
|
||||
Last checked: {new Date(service.lastChecked).toLocaleTimeString()}
|
||||
</p>
|
||||
{service.responseTime && (
|
||||
<p className="text-xs text-bolt-elements-textTertiary">
|
||||
Response time: {Math.round(service.responseTime)}ms
|
||||
</p>
|
||||
)}
|
||||
{service.message && (
|
||||
<p className="text-xs text-bolt-elements-textTertiary">{service.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames('flex items-center gap-2', getStatusColor(service.status))}>
|
||||
<span className="text-sm capitalize">{service.status}</span>
|
||||
{getStatusIcon(service.status)}
|
||||
</div>
|
||||
</div>
|
||||
{service.incidents && service.incidents.length > 0 && (
|
||||
<div className="mt-2 border-t border-bolt-elements-borderColor pt-2">
|
||||
<p className="text-xs font-medium text-bolt-elements-textSecondary mb-1">Recent Incidents:</p>
|
||||
<ul className="text-xs text-bolt-elements-textTertiary space-y-1">
|
||||
{service.incidents.map((incident, i) => (
|
||||
<li key={i}>{incident}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Add tab metadata
|
||||
ServiceStatusTab.tabMetadata = {
|
||||
icon: 'i-ph:activity-bold',
|
||||
description: 'Monitor and test LLM provider service status',
|
||||
category: 'services',
|
||||
};
|
||||
|
||||
export default ServiceStatusTab;
|
||||
Reference in New Issue
Block a user