feat: local providers refactor & enhancement (#1968)
* feat: improve local providers health monitoring and model management - Add automatic health monitoring initialization for enabled providers - Add LM Studio model management and display functionality - Fix endpoint status detection by setting default base URLs - Replace mixed icon libraries with consistent Lucide icons only - Fix button styling with transparent backgrounds - Add comprehensive setup guides with web-researched content - Add proper navigation with back buttons between views - Fix all TypeScript and linting issues in LocalProvidersTab 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Remove Service Status tab and related code The Service Status tab and all associated files, components, and provider checkers have been deleted. References to 'service-status' have been removed from tab constants, types, and the control panel. This simplifies the settings UI and codebase by eliminating the service status monitoring feature. * Update LocalProvidersTab.tsx * Fix all linter and TypeScript errors in local providers components - Remove unused imports and fix import formatting - Fix type-only imports for OllamaModel and LMStudioModel - Fix Icon component usage in ProviderCard.tsx - Clean up unused imports across all local provider files - Ensure all TypeScript and ESLint checks pass --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Stijnus
120
app/components/@settings/tabs/providers/local/ProviderCard.tsx
Normal file
120
app/components/@settings/tabs/providers/local/ProviderCard.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { Card, CardContent } from '~/components/ui/Card';
|
||||
import { Link, Server, Monitor, Globe } from 'lucide-react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { IProviderConfig } from '~/types/model';
|
||||
import { PROVIDER_DESCRIPTIONS } from './types';
|
||||
|
||||
// Provider Card Component
|
||||
interface ProviderCardProps {
|
||||
provider: IProviderConfig;
|
||||
onToggle: (enabled: boolean) => void;
|
||||
onUpdateBaseUrl: (url: string) => void;
|
||||
isEditing: boolean;
|
||||
onStartEditing: () => void;
|
||||
onStopEditing: () => void;
|
||||
}
|
||||
|
||||
function ProviderCard({
|
||||
provider,
|
||||
onToggle,
|
||||
onUpdateBaseUrl,
|
||||
isEditing,
|
||||
onStartEditing,
|
||||
onStopEditing,
|
||||
}: ProviderCardProps) {
|
||||
const getIcon = (providerName: string) => {
|
||||
switch (providerName) {
|
||||
case 'Ollama':
|
||||
return Server;
|
||||
case 'LMStudio':
|
||||
return Monitor;
|
||||
case 'OpenAILike':
|
||||
return Globe;
|
||||
default:
|
||||
return Server;
|
||||
}
|
||||
};
|
||||
|
||||
const Icon = getIcon(provider.name);
|
||||
|
||||
return (
|
||||
<Card className="bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-all duration-300 shadow-sm hover:shadow-md border border-bolt-elements-borderColor hover:border-purple-500/30">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
|
||||
provider.settings.enabled
|
||||
? 'bg-gradient-to-br from-purple-500/20 to-purple-600/20 ring-1 ring-purple-500/30'
|
||||
: 'bg-bolt-elements-background-depth-3',
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={classNames(
|
||||
'w-6 h-6 transition-all duration-300',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textTertiary',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-green-500/10 text-green-500 font-medium">Local</span>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mb-4">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as keyof typeof PROVIDER_DESCRIPTIONS]}
|
||||
</p>
|
||||
|
||||
{provider.settings.enabled && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-bolt-elements-textPrimary">API Endpoint</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={provider.settings.baseUrl}
|
||||
placeholder={`Enter ${provider.name} base URL`}
|
||||
className="w-full px-4 py-3 rounded-lg text-sm bg-bolt-elements-background-depth-4 border border-purple-500/30 text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all duration-200 shadow-sm"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
onUpdateBaseUrl(e.currentTarget.value);
|
||||
onStopEditing();
|
||||
} else if (e.key === 'Escape') {
|
||||
onStopEditing();
|
||||
}
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
onUpdateBaseUrl(e.target.value);
|
||||
onStopEditing();
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={onStartEditing}
|
||||
className="w-full px-4 py-3 rounded-lg text-sm bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4 hover:shadow-sm transition-all duration-200 text-left group"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-bolt-elements-textSecondary group-hover:text-bolt-elements-textPrimary">
|
||||
<Link className="w-4 h-4 group-hover:text-purple-500 transition-colors" />
|
||||
<span className="font-mono">{provider.settings.baseUrl || 'Click to set base URL'}</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={onToggle}
|
||||
aria-label={`Toggle ${provider.name} provider`}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProviderCard;
|
||||
Reference in New Issue
Block a user