File size: 1,745 Bytes
15c3607 | 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 | <script lang="ts">
import { AlertTriangle, Server } from '@lucide/svelte';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
import { serverProps, serverLoading, serverError } from '$lib/stores/server.svelte';
import { singleModelName } from '$lib/stores/models.svelte';
interface Props {
class?: string;
showActions?: boolean;
}
let { class: className = '', showActions = false }: Props = $props();
let error = $derived(serverError());
let loading = $derived(serverLoading());
let model = $derived(singleModelName());
let serverData = $derived(serverProps());
function getStatusColor() {
if (loading) return 'bg-yellow-500';
if (error) return 'bg-red-500';
if (serverData) return 'bg-green-500';
return 'bg-gray-500';
}
function getStatusText() {
if (loading) return 'Connecting...';
if (error) return 'Connection Error';
if (serverData) return 'Connected';
return 'Unknown';
}
</script>
<div class="flex items-center space-x-3 {className}">
<div class="flex items-center space-x-2">
<div class="h-2 w-2 rounded-full {getStatusColor()}"></div>
<span class="text-sm text-muted-foreground">{getStatusText()}</span>
</div>
{#if serverData && !error}
<Badge variant="outline" class="text-xs">
<Server class="mr-1 h-3 w-3" />
{model || 'Unknown Model'}
</Badge>
{#if serverData?.default_generation_settings?.n_ctx}
<Badge variant="secondary" class="text-xs">
ctx: {serverData.default_generation_settings.n_ctx.toLocaleString()}
</Badge>
{/if}
{/if}
{#if showActions && error}
<Button variant="outline" size="sm" class="text-destructive">
<AlertTriangle class="h-4 w-4" />
{error}
</Button>
{/if}
</div>
|