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

   1 <script lang="ts">
   2         import { Settings, Plus } from '@lucide/svelte';
   3         import { Switch } from '$lib/components/ui/switch';
   4         import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   5         import { McpLogo, DropdownMenuSearchable } from '$lib/components/app';
   6         import { conversationsStore } from '$lib/stores/conversations.svelte';
   7         import { mcpStore } from '$lib/stores/mcp.svelte';
   8         import { HealthCheckStatus } from '$lib/enums';
   9         import type { MCPServerSettingsEntry } from '$lib/types';
  10         import { goto } from '$app/navigation';
  11
  12         interface Props {
  13                 onMcpSettingsClick?: () => void;
  14         }
  15
  16         let { onMcpSettingsClick }: Props = $props();
  17
  18         let mcpSearchQuery = $state('');
  19         let allMcpServers = $derived(mcpStore.getServersSorted());
  20         let mcpServers = $derived(allMcpServers.filter((s) => s.enabled));
  21         let hasMcpServers = $derived(mcpServers.length > 0);
  22         // let hasAnyMcpServers = $derived(allMcpServers.length > 0);
  23         let filteredMcpServers = $derived.by(() => {
  24                 const query = mcpSearchQuery.toLowerCase().trim();
  25                 if (!query) return mcpServers;
  26                 return mcpServers.filter((s) => {
  27                         const name = getServerLabel(s).toLowerCase();
  28                         const url = s.url.toLowerCase();
  29                         return name.includes(query) || url.includes(query);
  30                 });
  31         });
  32
  33         function getServerLabel(server: MCPServerSettingsEntry): string {
  34                 return mcpStore.getServerLabel(server);
  35         }
  36
  37         function isServerEnabledForChat(serverId: string): boolean {
  38                 return conversationsStore.isMcpServerEnabledForChat(serverId);
  39         }
  40
  41         async function toggleServerForChat(serverId: string) {
  42                 await conversationsStore.toggleMcpServerForChat(serverId);
  43         }
  44
  45         function handleMcpSubMenuOpen(open: boolean) {
  46                 if (open) {
  47                         mcpSearchQuery = '';
  48                         mcpStore.runHealthChecksForServers(allMcpServers);
  49                 }
  50         }
  51
  52         function handleMcpSettingsClick() {
  53                 onMcpSettingsClick?.();
  54
  55                 goto(`${hasMcpServers ? '' : '?add'}#/settings/mcp`);
  56         }
  57 </script>
  58
  59 <DropdownMenu.Sub onOpenChange={handleMcpSubMenuOpen}>
  60         <DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
  61                 <McpLogo class="h-4 w-4" />
  62
  63                 <span>MCP Servers</span>
  64         </DropdownMenu.SubTrigger>
  65
  66         <DropdownMenu.SubContent class="w-72 pt-0">
  67                 {#if hasMcpServers}
  68                         <DropdownMenuSearchable
  69                                 placeholder="Search servers..."
  70                                 bind:searchValue={mcpSearchQuery}
  71                                 emptyMessage="No servers found"
  72                                 isEmpty={filteredMcpServers.length === 0}
  73                         >
  74                                 <div class="max-h-64 overflow-y-auto">
  75                                         {#each filteredMcpServers as server (server.id)}
  76                                                 {@const healthState = mcpStore.getHealthCheckState(server.id)}
  77                                                 {@const hasError = healthState.status === HealthCheckStatus.ERROR}
  78                                                 {@const isEnabledForChat = isServerEnabledForChat(server.id)}
  79
  80                                                 <button
  81                                                         type="button"
  82                                                         class="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
  83                                                         onclick={() => !hasError && toggleServerForChat(server.id)}
  84                                                         disabled={hasError}
  85                                                 >
  86                                                         <div class="flex min-w-0 flex-1 items-center gap-2">
  87                                                                 {#if mcpStore.getServerFavicon(server.id)}
  88                                                                         <img
  89                                                                                 src={mcpStore.getServerFavicon(server.id)}
  90                                                                                 alt=""
  91                                                                                 class="h-4 w-4 shrink-0 rounded-sm"
  92                                                                                 onerror={(e) => {
  93                                                                                         (e.currentTarget as HTMLImageElement).style.display = 'none';
  94                                                                                 }}
  95                                                                         />
  96                                                                 {/if}
  97
  98                                                                 <span class="truncate text-sm">{getServerLabel(server)}</span>
  99
 100                                                                 {#if hasError}
 101                                                                         <span
 102                                                                                 class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
 103                                                                         >
 104                                                                                 Error
 105                                                                         </span>
 106                                                                 {/if}
 107                                                         </div>
 108
 109                                                         <Switch
 110                                                                 checked={isEnabledForChat}
 111                                                                 disabled={hasError}
 112                                                                 onclick={(e: MouseEvent) => e.stopPropagation()}
 113                                                                 onCheckedChange={() => toggleServerForChat(server.id)}
 114                                                         />
 115                                                 </button>
 116                                         {/each}
 117                                 </div>
 118
 119                                 {#snippet footer()}
 120                                         <DropdownMenu.Item
 121                                                 class="flex cursor-pointer items-center gap-2"
 122                                                 onclick={handleMcpSettingsClick}
 123                                         >
 124                                                 <Settings class="h-4 w-4" />
 125
 126                                                 <span>Manage MCP Servers</span>
 127                                         </DropdownMenu.Item>
 128                                 {/snippet}
 129                         </DropdownMenuSearchable>
 130                 {:else}
 131                         <div class="px-2 py-3 text-center text-sm text-muted-foreground">
 132                                 No MCP servers configured
 133                         </div>
 134
 135                         <DropdownMenu.Separator />
 136
 137                         <DropdownMenu.Item
 138                                 class="flex cursor-pointer items-center gap-2"
 139                                 onclick={handleMcpSettingsClick}
 140                         >
 141                                 <Plus class="h-4 w-4" />
 142
 143                                 <span>Add MCP Servers</span>
 144                         </DropdownMenu.Item>
 145                 {/if}
 146         </DropdownMenu.SubContent>
 147 </DropdownMenu.Sub>