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

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