Spaces:
Sleeping
Sleeping
File size: 4,479 Bytes
f871fed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 'use client'
import { useMemo, useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Check, X } from 'lucide-react'
import { ProviderAvailability } from '@/lib/types/models'
interface ProviderStatusProps {
providers: ProviderAvailability
}
export function ProviderStatus({ providers }: ProviderStatusProps) {
// Combine all providers, with available ones first
const allProviders = useMemo(
() => [
...providers.available.map((p) => ({ name: p, available: true })),
...providers.unavailable.map((p) => ({ name: p, available: false })),
],
[providers.available, providers.unavailable],
)
const [expanded, setExpanded] = useState(false)
const visibleProviders = useMemo(() => {
if (expanded) {
return allProviders
}
return allProviders.slice(0, 6)
}, [allProviders, expanded])
return (
<Card>
<CardHeader>
<CardTitle>AI Providers</CardTitle>
<CardDescription>
Configure providers through environment variables to enable their models.
<span className="ml-1">
{providers.available.length} of {allProviders.length} configured
</span>
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-2 sm:grid-cols-2">
{visibleProviders.map((provider) => {
const supportedTypes = providers.supported_types[provider.name] ?? []
return (
<div
key={provider.name}
className={`flex items-center gap-3 rounded-lg border px-4 py-3 transition-colors ${
provider.available ? 'bg-card' : 'bg-muted/40'
}`}
>
<div className={`flex items-center justify-center rounded-full p-1.5 ${
provider.available
? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-300'
: 'bg-muted-foreground/10 text-muted-foreground'
}`}>
{provider.available ? (
<Check className="h-3.5 w-3.5" />
) : (
<X className="h-3.5 w-3.5" />
)}
</div>
<div className="flex min-w-0 flex-1 items-center justify-between gap-3">
<span
className={`truncate text-sm font-medium capitalize ${
!provider.available ? 'text-muted-foreground' : 'text-foreground'
}`}
>
{provider.name}
</span>
{provider.available ? (
<div className="flex flex-wrap items-center justify-end gap-1">
{supportedTypes.length > 0 ? (
supportedTypes.map((type) => (
<Badge key={type} variant="secondary" className="text-xs font-medium">
{type.replace('_', ' ')}
</Badge>
))
) : (
<Badge variant="outline" className="text-xs">No models</Badge>
)}
</div>
) : (
<Badge variant="outline" className="text-xs text-muted-foreground border-dashed">
Not configured
</Badge>
)}
</div>
</div>
)
})}
</div>
{allProviders.length > 6 ? (
<div className="mt-4 flex justify-center">
<button
type="button"
onClick={() => setExpanded((prev) => !prev)}
className="text-sm font-medium text-primary hover:underline"
>
{expanded ? 'See less' : `See all ${allProviders.length} providers`}
</button>
</div>
) : null}
<div className="mt-6 pt-4 border-t">
<a
href="https://github.com/lfnovo/open-notebook/blob/main/docs/features/ai-models.md"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-primary hover:underline"
>
Learn how to configure providers →
</a>
</div>
</CardContent>
</Card>
)
}
|