File size: 3,463 Bytes
15c3607 | 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <script lang="ts">
import { ChevronDown, ChevronRight } from '@lucide/svelte';
import { Checkbox } from '$lib/components/ui/checkbox';
import * as Collapsible from '$lib/components/ui/collapsible';
import { TruncatedText, McpServerIdentity } from '$lib/components/app';
import { toolsStore } from '$lib/stores/tools.svelte';
import { permissionsStore } from '$lib/stores/permissions.svelte';
import { mcpStore } from '$lib/stores/mcp.svelte';
import { SvelteSet } from 'svelte/reactivity';
let expandedGroups = new SvelteSet<string>();
let groups = $derived(toolsStore.toolGroups);
function toggleExpanded(label: string) {
if (expandedGroups.has(label)) {
expandedGroups.delete(label);
} else {
expandedGroups.add(label);
}
}
</script>
{#if groups.length === 0}
<div class="py-8 text-center text-sm text-muted-foreground">No tools available</div>
{:else}
<div class="space-y-2">
{#each groups as group (group.label)}
{@const isExpanded = expandedGroups.has(group.label)}
<Collapsible.Root open={isExpanded} onOpenChange={() => toggleExpanded(group.label)}>
<Collapsible.Trigger
class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-muted/50"
>
{#if isExpanded}
<ChevronDown class="h-3.5 w-3.5 shrink-0" />
{:else}
<ChevronRight class="h-3.5 w-3.5 shrink-0" />
{/if}
{@const faviconUrl = group.serverId ? mcpStore.getServerFavicon(group.serverId) : null}
<span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
<McpServerIdentity
iconClass="h-4 w-4"
iconRounded="rounded-sm"
showVersion={false}
displayName={group.label}
{faviconUrl}
/>
</span>
<span class="ml-auto shrink-0 text-xs text-muted-foreground">
{group.tools.length} tool{group.tools.length !== 1 ? 's' : ''}
</span>
</Collapsible.Trigger>
<Collapsible.Content>
<div class="ml-4 border-l border-border/50 pl-2">
<!-- Header row -->
<div class="flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground">
<span class="min-w-0 flex-1">Tool</span>
<span class="w-16 shrink-0 text-center">Enabled</span>
<span class="w-20 shrink-0 text-center">Always allow</span>
</div>
{#each group.tools as entry (entry.key)}
{@const toolName = entry.definition.function.name}
{@const isEnabled = toolsStore.isToolEnabled(entry.key)}
{@const permissionKey = entry.key}
{@const isAlwaysAllowed = permissionsStore.hasTool(permissionKey)}
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50">
<TruncatedText text={toolName} class="flex-1" showTooltip={true} />
<div class="flex w-16 shrink-0 justify-center">
<Checkbox
checked={isEnabled}
onCheckedChange={() => toolsStore.toggleTool(entry.key)}
class="h-4 w-4"
/>
</div>
<div class="flex w-20 shrink-0 justify-center">
<Checkbox
checked={isAlwaysAllowed}
onCheckedChange={() => {
if (isAlwaysAllowed) {
permissionsStore.revokeTool(permissionKey);
} else {
permissionsStore.allowTool(permissionKey);
}
}}
class="h-4 w-4"
/>
</div>
</div>
{/each}
</div>
</Collapsible.Content>
</Collapsible.Root>
{/each}
</div>
{/if}
|