44 lines
1.3 KiB
Svelte
44 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import * as Dialog from '$lib/components/ui/dialog';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { McpLogo, McpSettingsSection } from '$lib/components/app';
|
|
|
|
interface Props {
|
|
onOpenChange?: (open: boolean) => void;
|
|
open?: boolean;
|
|
}
|
|
|
|
let { onOpenChange, open = $bindable(false) }: Props = $props();
|
|
|
|
function handleClose() {
|
|
onOpenChange?.(false);
|
|
}
|
|
</script>
|
|
|
|
<Dialog.Root {open} onOpenChange={handleClose}>
|
|
<Dialog.Content
|
|
class="z-999999 flex h-[100dvh] max-h-[100dvh] min-h-[100dvh] flex-col gap-0 rounded-none p-0
|
|
md:h-[80vh] md:max-h-[80vh] md:min-h-0 md:rounded-lg"
|
|
style="max-width: 56rem;"
|
|
>
|
|
<div class="border-b border-border/30 p-4 md:p-6">
|
|
<Dialog.Title class="inline-flex items-center text-lg font-semibold">
|
|
<McpLogo class="mr-2 inline h-4 w-4" />
|
|
|
|
MCP Servers
|
|
</Dialog.Title>
|
|
<Dialog.Description class="text-sm text-muted-foreground">
|
|
Add and configure MCP servers to enable agentic tool execution capabilities.
|
|
</Dialog.Description>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 md:p-6">
|
|
<McpSettingsSection />
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 border-t border-border/30 p-4 md:p-6">
|
|
<Button onclick={handleClose}>Close</Button>
|
|
</div>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|