File size: 6,271 Bytes
e67ab0e cbdd432 e67ab0e cbdd432 e67ab0e |
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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 |
<script lang="ts">
import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
import Modal from "$lib/components/Modal.svelte";
import ServerCard from "./ServerCard.svelte";
import AddServerForm from "./AddServerForm.svelte";
import {
allMcpServers,
selectedServerIds,
enabledServersCount,
addCustomServer,
refreshMcpServers,
healthCheckServer,
} from "$lib/stores/mcpServers";
import type { KeyValuePair } from "$lib/types/Tool";
import IconAddLarge from "~icons/carbon/add-large";
import IconRefresh from "~icons/carbon/renew";
import LucideHammer from "~icons/lucide/hammer";
import IconMCP from "$lib/components/icons/IconMCP.svelte";
const publicConfig = usePublicConfig();
interface Props {
onclose: () => void;
}
let { onclose }: Props = $props();
type View = "list" | "add";
let currentView = $state<View>("list");
let isRefreshing = $state(false);
const baseServers = $derived($allMcpServers.filter((s) => s.type === "base"));
const customServers = $derived($allMcpServers.filter((s) => s.type === "custom"));
const enabledCount = $derived($enabledServersCount);
function handleAddServer(serverData: { name: string; url: string; headers?: KeyValuePair[] }) {
addCustomServer(serverData);
currentView = "list";
}
function handleCancel() {
currentView = "list";
}
async function handleRefresh() {
if (isRefreshing) return;
isRefreshing = true;
try {
await refreshMcpServers();
// After refreshing the list, re-run health checks for all known servers
const servers = $allMcpServers;
await Promise.allSettled(servers.map((s) => healthCheckServer(s)));
} finally {
isRefreshing = false;
}
}
</script>
<Modal width={currentView === "list" ? "w-[800px]" : "w-[600px]"} {onclose} closeButton>
<div class="p-6">
<!-- Header -->
<div class="mb-6">
<h2 class="mb-1 text-xl font-semibold text-gray-900 dark:text-gray-200">
{#if currentView === "list"}
MCP Servers
{:else}
Add MCP server
{/if}
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">
{#if currentView === "list"}
Manage MCP servers to extend {publicConfig.PUBLIC_APP_NAME} with external tools.
{:else}
Add a custom MCP server to {publicConfig.PUBLIC_APP_NAME}.
{/if}
</p>
</div>
<!-- Content -->
{#if currentView === "list"}
<div
class="mb-6 flex justify-between rounded-lg p-4 max-sm:flex-col max-sm:gap-4 sm:items-center {!enabledCount
? 'bg-gray-100 dark:bg-white/5'
: 'bg-blue-50 dark:bg-blue-900/10'}"
>
<div class="flex items-center gap-3">
<div
class="flex size-10 items-center justify-center rounded-xl bg-blue-500/10"
class:grayscale={!enabledCount}
>
<IconMCP classNames="size-8 text-blue-600 dark:text-blue-500" />
</div>
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
{$allMcpServers.length}
{$allMcpServers.length === 1 ? "server" : "servers"} configured
</p>
<p class="text-xs text-gray-600 dark:text-gray-400">
{enabledCount} enabled
</p>
</div>
</div>
<div class="flex gap-2">
<button
onclick={handleRefresh}
disabled={isRefreshing}
class="btn gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
>
<IconRefresh class="size-4 {isRefreshing ? 'animate-spin' : ''}" />
{isRefreshing ? "Refreshing…" : "Refresh"}
</button>
<button
onclick={() => (currentView = "add")}
class="btn flex items-center gap-0.5 rounded-lg bg-blue-600 py-1.5 pl-2 pr-3 text-sm font-medium text-white hover:bg-blue-600"
>
<IconAddLarge class="size-4" />
Add Server
</button>
</div>
</div>
<div class="space-y-5">
<!-- Base Servers -->
{#if baseServers.length > 0}
<div>
<h3 class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
Base Servers ({baseServers.length})
</h3>
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
{#each baseServers as server (server.id)}
<ServerCard {server} isSelected={$selectedServerIds.has(server.id)} />
{/each}
</div>
</div>
{/if}
<!-- Custom Servers -->
<div>
<h3 class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
Custom Servers ({customServers.length})
</h3>
{#if customServers.length === 0}
<div
class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-8 dark:border-gray-700"
>
<LucideHammer class="mb-3 size-12 text-gray-400" />
<p class="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
No custom servers yet
</p>
<p class="mb-4 text-xs text-gray-600 dark:text-gray-400">
Add your own MCP servers with custom tools
</p>
<button
onclick={() => (currentView = "add")}
class="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600"
>
<IconAddLarge class="size-4" />
Add Your First Server
</button>
</div>
{:else}
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
{#each customServers as server (server.id)}
<ServerCard {server} isSelected={$selectedServerIds.has(server.id)} />
{/each}
</div>
{/if}
</div>
<!-- Help Text -->
<div class="rounded-lg bg-gray-50 p-4 dark:bg-gray-700">
<h4 class="mb-2 text-sm font-medium text-gray-900 dark:text-gray-100">💡 Quick Tips</h4>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li>• Only connect to servers you trust</li>
<li>• Enable servers to make their tools available in chat</li>
<li>• Use the Health Check button to verify server connectivity</li>
<li>• You can add HTTP headers for authentication when required</li>
</ul>
</div>
</div>
{:else if currentView === "add"}
<AddServerForm onsubmit={handleAddServer} oncancel={handleCancel} />
{/if}
</div>
</Modal>
|