120 lines
3.7 KiB
Svelte
120 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import * as Dialog from '$lib/components/ui/dialog';
|
|
import { Download } from '@lucide/svelte';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { mcpStore } from '$lib/stores/mcp.svelte';
|
|
import { SyntaxHighlightedCode, ActionIconCopyToClipboard } from '$lib/components/app';
|
|
import {
|
|
getLanguageFromFilename,
|
|
isCodeResource,
|
|
isImageResource,
|
|
downloadResourceContent
|
|
} from '$lib/utils';
|
|
import { MimeTypeIncludes, MimeTypeText } from '$lib/enums';
|
|
import { DEFAULT_RESOURCE_FILENAME } from '$lib/constants';
|
|
import type { DatabaseMessageExtraMcpResource } from '$lib/types';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
extra: DatabaseMessageExtraMcpResource;
|
|
}
|
|
|
|
let { open = $bindable(), onOpenChange, extra }: Props = $props();
|
|
|
|
const serverName = $derived(mcpStore.getServerDisplayName(extra.serverName));
|
|
const favicon = $derived(mcpStore.getServerFavicon(extra.serverName));
|
|
|
|
function getLanguage(): string {
|
|
if (extra.mimeType?.includes(MimeTypeIncludes.JSON)) return MimeTypeIncludes.JSON;
|
|
if (extra.mimeType?.includes(MimeTypeIncludes.JAVASCRIPT)) return MimeTypeIncludes.JAVASCRIPT;
|
|
if (extra.mimeType?.includes(MimeTypeIncludes.TYPESCRIPT)) return MimeTypeIncludes.TYPESCRIPT;
|
|
|
|
const name = extra.name || extra.uri || '';
|
|
return getLanguageFromFilename(name) || 'plaintext';
|
|
}
|
|
|
|
function handleDownload() {
|
|
if (!extra.content) return;
|
|
downloadResourceContent(
|
|
extra.content,
|
|
extra.mimeType || MimeTypeText.PLAIN,
|
|
extra.name || DEFAULT_RESOURCE_FILENAME
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<Dialog.Root bind:open {onOpenChange}>
|
|
<Dialog.Content class="grid max-h-[90vh] max-w-5xl overflow-hidden sm:w-auto sm:max-w-6xl">
|
|
<Dialog.Header>
|
|
<Dialog.Title class="pr-8">{extra.name}</Dialog.Title>
|
|
<Dialog.Description>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-muted-foreground">{extra.uri}</span>
|
|
|
|
{#if serverName}
|
|
<span class="flex items-center gap-1 text-xs text-muted-foreground">
|
|
·
|
|
{#if favicon}
|
|
<img
|
|
src={favicon}
|
|
alt=""
|
|
class="h-3 w-3 shrink-0 rounded-sm"
|
|
onerror={(e) => {
|
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
{/if}
|
|
{serverName}
|
|
</span>
|
|
{/if}
|
|
|
|
{#if extra.mimeType}
|
|
<span class="rounded bg-muted px-1.5 py-0.5 text-xs">{extra.mimeType}</span>
|
|
{/if}
|
|
</div>
|
|
</Dialog.Description>
|
|
</Dialog.Header>
|
|
|
|
<div class="flex items-center justify-end gap-1">
|
|
<ActionIconCopyToClipboard
|
|
text={extra.content}
|
|
canCopy={!!extra.content}
|
|
ariaLabel="Copy content"
|
|
/>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-7 w-7 p-0"
|
|
onclick={handleDownload}
|
|
disabled={!extra.content}
|
|
title="Download content"
|
|
>
|
|
<Download class="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="overflow-auto">
|
|
{#if isImageResource(extra.mimeType, extra.uri) && extra.content}
|
|
<div class="flex items-center justify-center">
|
|
<img
|
|
src={extra.content.startsWith('data:')
|
|
? extra.content
|
|
: `data:${extra.mimeType || 'image/png'};base64,${extra.content}`}
|
|
alt={extra.name}
|
|
class="max-h-[70vh] max-w-full rounded object-contain"
|
|
/>
|
|
</div>
|
|
{:else if isCodeResource(extra.mimeType, extra.uri) && extra.content}
|
|
<SyntaxHighlightedCode code={extra.content} language={getLanguage()} maxHeight="70vh" />
|
|
{:else if extra.content}
|
|
<pre
|
|
class="max-h-[70vh] overflow-auto rounded-md border bg-muted/30 p-4 font-mono text-sm break-words whitespace-pre-wrap">{extra.content}</pre>
|
|
{:else}
|
|
<div class="py-8 text-center text-sm text-muted-foreground">No content available</div>
|
|
{/if}
|
|
</div>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|