File size: 1,745 Bytes
c59fd93 | 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 | <script lang="ts">
import { AlertTriangle, Server } from '@lucide/svelte';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
import { ICON_CLASS_DEFAULT } from '$lib/constants';
import { modelsStore, serverStore } from '$lib/stores';
interface Props {
class?: string;
showActions?: boolean;
}
let { class: className = '', showActions = false }: Props = $props();
let error = $derived(serverStore.error);
let loading = $derived(serverStore.loading);
let model = $derived(modelsStore.singleModelName);
let serverData = $derived(serverStore.props);
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 class="text-xs" variant="outline">
<Server class="mr-1 h-3 w-3" />
{model || 'Unknown Model'}
</Badge>
{#if serverData?.default_generation_settings?.n_ctx}
<Badge class="text-xs" variant="secondary">
ctx: {serverData.default_generation_settings.n_ctx.toLocaleString()}
</Badge>
{/if}
{/if}
{#if showActions && error}
<Button class="text-destructive" size="sm" variant="outline">
<AlertTriangle class={ICON_CLASS_DEFAULT} />
{error}
</Button>
{/if}
</div>
|