git.djapps.eu Git - pkg/ggml/sources/llama.cpp/blob

   1 <script lang="ts">
   2         import { AlertCircle, Loader2 } from '@lucide/svelte';
   3         import { X } from '@lucide/svelte';
   4         import { ActionIcon } from '$lib/components/app';
   5         import * as Tooltip from '$lib/components/ui/tooltip';
   6         import { mcpStore } from '$lib/stores/mcp.svelte';
   7         import type { MCPResourceAttachment } from '$lib/types';
   8         import { getResourceDisplayName, getResourceIcon } from '$lib/utils';
   9
  10         interface Props {
  11                 attachment: MCPResourceAttachment;
  12                 class?: string;
  13                 onclick?: () => void;
  14                 onRemove?: (attachmentId: string) => void;
  15         }
  16
  17         let { attachment, class: className, onclick, onRemove }: Props = $props();
  18
  19         const ResourceIcon = $derived(
  20                 getResourceIcon(attachment.resource.mimeType, attachment.resource.uri)
  21         );
  22         const serverName = $derived(mcpStore.getServerDisplayName(attachment.resource.serverName));
  23         const favicon = $derived(mcpStore.getServerFavicon(attachment.resource.serverName));
  24
  25         function getStatusClass(attachment: MCPResourceAttachment): string {
  26                 if (attachment.error) return 'border-red-500/50 bg-red-500/10';
  27
  28                 if (attachment.loading) return 'border-border/50 bg-muted/30';
  29
  30                 return 'border-border/50 bg-muted/30';
  31         }
  32 </script>
  33
  34 <Tooltip.Root>
  35         <Tooltip.Trigger>
  36                 <button
  37                         class={[
  38                                 'flex flex-shrink-0 items-center gap-1.5 rounded-md border px-2 py-0.75 text-sm transition-colors',
  39                                 getStatusClass(attachment),
  40                                 onclick && 'cursor-pointer hover:bg-muted/50',
  41                                 className
  42                         ]}
  43                         disabled={!onclick}
  44                         {onclick}
  45                         type="button"
  46                 >
  47                         {#if attachment.loading}
  48                                 <Loader2 class="h-3 w-3 animate-spin text-muted-foreground" />
  49                         {:else if attachment.error}
  50                                 <AlertCircle class="h-3 w-3 text-red-500" />
  51                         {:else}
  52                                 <ResourceIcon class="h-3 w-3 text-muted-foreground" />
  53                         {/if}
  54
  55                         <span class="max-w-[150px] truncate text-xs">
  56                                 {getResourceDisplayName(attachment.resource)}
  57                         </span>
  58
  59                         {#if onRemove}
  60                                 <ActionIcon
  61                                         class="-my-2 -mr-1.5 bg-transparent"
  62                                         icon={X}
  63                                         iconSize="h-2 w-2"
  64                                         onclick={() => onRemove?.(attachment.id)}
  65                                         stopPropagationOnClick
  66                                         tooltip="Remove"
  67                                 />
  68                         {/if}
  69                 </button>
  70         </Tooltip.Trigger>
  71
  72         <Tooltip.Content>
  73                 <div class="flex items-center gap-1 text-xs">
  74                         {#if favicon}
  75                                 <img
  76                                         alt={attachment.resource.serverName}
  77                                         class="h-3 w-3 shrink-0 rounded-sm"
  78                                         onerror={(e) => {
  79                                                 (e.currentTarget as HTMLImageElement).style.display = 'none';
  80                                         }}
  81                                         src={favicon}
  82                                 />
  83                         {/if}
  84
  85                         <span class="truncate">
  86                                 {serverName}
  87                         </span>
  88                 </div>
  89         </Tooltip.Content>
  90 </Tooltip.Root>