llama-cpp-K2-FAST2 / tools /ui /src /lib /components /app /chat /ChatScreen /ChatScreenServerError.svelte
| <script lang="ts"> | |
| import { AlertTriangle, Loader2, RefreshCw } from '@lucide/svelte'; | |
| import * as Alert from '$lib/components/ui/alert'; | |
| import { ICON_CLASS_DEFAULT } from '$lib/constants'; | |
| import { serverStore } from '$lib/stores'; | |
| let hasError = $derived(!!serverStore.error); | |
| let isLoadingModel = $derived(serverStore.status === 503); | |
| </script> | |
| {#if hasError} | |
| <div class="pointer-events-auto mx-auto mb-4 max-w-[48rem] px-1"> | |
| <Alert.Root variant={isLoadingModel ? 'default' : 'destructive'}> | |
| {#if isLoadingModel} | |
| <Loader2 class="{ICON_CLASS_DEFAULT} animate-spin" /> | |
| {:else} | |
| <AlertTriangle class={ICON_CLASS_DEFAULT} /> | |
| {/if} | |
| <Alert.Title class="flex items-center justify-between"> | |
| <span>{isLoadingModel ? 'Loading model' : 'Server unavailable'}</span> | |
| {#if !isLoadingModel} | |
| <button | |
| class="flex items-center gap-1.5 rounded-lg bg-destructive/20 px-2 py-1 text-xs font-medium hover:bg-destructive/30 disabled:opacity-50" | |
| disabled={serverStore.loading} | |
| onclick={() => serverStore.fetch()} | |
| > | |
| <RefreshCw class="h-3 w-3 {serverStore.loading ? 'animate-spin' : ''}" /> | |
| {serverStore.loading ? 'Retrying...' : 'Retry'} | |
| </button> | |
| {/if} | |
| </Alert.Title> | |
| {#if !isLoadingModel} | |
| <Alert.Description>{serverStore.error}</Alert.Description> | |
| {/if} | |
| </Alert.Root> | |
| </div> | |
| {/if} | |