Skip to content

Commit 0dc7a50

Browse files
nandshanandsha
committed
feat: Enhance ResourceLinkView with expandable resource content view
Add click-to-expand functionality for inline resource content display
1 parent 7c9cfa2 commit 0dc7a50

File tree

4 files changed

+126
-90
lines changed

4 files changed

+126
-90
lines changed

‎client/src/App.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ const App = () => {
8080
ResourceTemplate[]
8181
>([]);
8282
const [resourceContent, setResourceContent] = useState<string>("");
83+
const [resourceContentMap, setResourceContentMap] = useState<
84+
Record<string, string>
85+
>({});
8386
const [prompts, setPrompts] = useState<Prompt[]>([]);
8487
const [promptContent, setPromptContent] = useState<string>("");
8588
const [tools, setTools] = useState<Tool[]>([]);
@@ -461,7 +464,12 @@ const App = () => {
461464
ReadResourceResultSchema,
462465
"resources",
463466
);
464-
setResourceContent(JSON.stringify(response, null, 2));
467+
const content = JSON.stringify(response, null, 2);
468+
setResourceContent(content);
469+
setResourceContentMap((prev) => ({
470+
...prev,
471+
[uri]: content,
472+
}));
465473
};
466474

467475
const subscribeToResource = async (uri: string) => {
@@ -863,6 +871,11 @@ const App = () => {
863871
toolResult={toolResult}
864872
nextCursor={nextToolCursor}
865873
error={errors.tools}
874+
resourceContent={resourceContentMap}
875+
onReadResource={(uri: string) => {
876+
clearError("resources");
877+
readResource(uri);
878+
}}
866879
/>
867880
<ConsoleTab />
868881
<PingTab

‎client/src/components/ResourceLinkView.tsx‎

Lines changed: 96 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,112 @@
1-
import { useState, useCallback, useEffect } from "react";
2-
import { Copy, CheckCheck } from "lucide-react";
3-
import { Button } from "@/components/ui/button";
4-
import { useToast } from "@/lib/hooks/useToast";
1+
import { useState, useCallback, useMemo, memo } from "react";
2+
import JsonView from "./JsonView";
53

64
interface ResourceLinkViewProps {
75
uri: string;
86
name?: string;
97
description?: string;
108
mimeType?: string;
9+
resourceContent: string;
10+
onReadResource?: (uri: string) => void;
1111
}
1212

13-
const ResourceLinkView = ({
14-
uri,
15-
name,
16-
description,
17-
mimeType,
18-
}: ResourceLinkViewProps) => {
19-
const { toast } = useToast();
20-
const [copied, setCopied] = useState(false);
13+
const ResourceLinkView = memo(
14+
({
15+
uri,
16+
name,
17+
description,
18+
mimeType,
19+
resourceContent,
20+
onReadResource,
21+
}: ResourceLinkViewProps) => {
22+
const [{ expanded, loading }, setState] = useState({
23+
expanded: false,
24+
loading: false,
25+
});
2126

22-
useEffect(() => {
23-
let timeoutId: NodeJS.Timeout;
24-
if (copied) {
25-
timeoutId = setTimeout(() => {
26-
setCopied(false);
27-
}, 500);
28-
}
29-
return () => {
30-
if (timeoutId) {
31-
clearTimeout(timeoutId);
32-
}
33-
};
34-
}, [copied]);
35-
36-
const handleCopyUri = useCallback(() => {
37-
try {
38-
navigator.clipboard.writeText(uri);
39-
setCopied(true);
40-
} catch (error) {
41-
toast({
42-
title: "Error",
43-
description: `There was an error copying URI to clipboard: ${error instanceof Error ? error.message : String(error)}`,
44-
variant: "destructive",
45-
});
46-
}
47-
}, [uri, toast]);
48-
49-
const displayName = name || new URL(uri).pathname.split("/").pop() || uri;
27+
const expandedContent = useMemo(
28+
() =>
29+
expanded && resourceContent ? (
30+
<div className="mt-2">
31+
<div className="flex justify-between items-center mb-1">
32+
<span className="font-semibold text-green-600">Resource:</span>
33+
</div>
34+
<JsonView data={resourceContent} className="bg-background" />
35+
</div>
36+
) : null,
37+
[expanded, resourceContent],
38+
);
5039

51-
return (
52-
<div
53-
className="p-4 border rounded relative bg-gray-50 dark:bg-gray-800"
54-
role="article"
55-
aria-label={`Resource link: ${displayName}`}
56-
>
57-
<Button
58-
size="icon"
59-
variant="ghost"
60-
className="absolute top-2 right-2"
61-
onClick={handleCopyUri}
62-
>
63-
{copied ? (
64-
<CheckCheck className="size-4 dark:text-green-700 text-green-600" />
65-
) : (
66-
<Copy className="size-4 text-foreground" />
67-
)}
68-
</Button>
40+
const handleClick = useCallback(() => {
41+
if (!onReadResource) return;
42+
if (!expanded) {
43+
setState((prev) => ({ ...prev, expanded: true, loading: true }));
44+
onReadResource(uri);
45+
setState((prev) => ({ ...prev, loading: false }));
46+
} else {
47+
setState((prev) => ({ ...prev, expanded: false }));
48+
}
49+
}, [expanded, onReadResource, uri]);
6950

70-
<div className="pr-10">
71-
<div className="flex items-start justify-between gap-2 mb-2">
72-
<a
73-
href={uri}
74-
target="_blank"
75-
rel="noopener noreferrer"
76-
className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded px-1 py-0.5 break-all font-mono flex-1 min-w-0"
77-
aria-label={`Open resource: ${uri}`}
78-
>
79-
{uri}
80-
</a>
81-
{mimeType && (
82-
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 flex-shrink-0">
83-
{mimeType}
84-
</span>
85-
)}
86-
</div>
51+
const handleKeyDown = useCallback(
52+
(e: React.KeyboardEvent) => {
53+
if ((e.key === "Enter" || e.key === " ") && onReadResource) {
54+
e.preventDefault();
55+
handleClick();
56+
}
57+
},
58+
[handleClick, onReadResource],
59+
);
8760

88-
{name && (
89-
<div className="font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1">
90-
{name}
61+
return (
62+
<div className="text-sm text-foreground bg-secondary py-2 px-3 rounded">
63+
<div
64+
className="flex justify-between items-center cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 rounded"
65+
onClick={onReadResource ? handleClick : undefined}
66+
onKeyDown={onReadResource ? handleKeyDown : undefined}
67+
tabIndex={onReadResource ? 0 : -1}
68+
role="button"
69+
aria-expanded={expanded}
70+
aria-label={`${expanded ? "Collapse" : "Expand"} resource ${uri}`}
71+
>
72+
<div className="flex-1 min-w-0">
73+
<div className="flex items-start justify-between gap-2 mb-1">
74+
<span className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline px-1 py-0.5 break-all font-mono flex-1 min-w-0">
75+
{uri}
76+
</span>
77+
<div className="flex items-center gap-2 flex-shrink-0">
78+
{mimeType && (
79+
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
80+
{mimeType}
81+
</span>
82+
)}
83+
{onReadResource && (
84+
<span className="ml-2 flex-shrink-0" aria-hidden="true">
85+
{loading ? (
86+
<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
87+
) : (
88+
<span>{expanded ? "▼" : "▶"}</span>
89+
)}
90+
</span>
91+
)}
92+
</div>
93+
</div>
94+
{name && (
95+
<div className="font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1">
96+
{name}
97+
</div>
98+
)}
99+
{description && (
100+
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
101+
{description}
102+
</p>
103+
)}
91104
</div>
92-
)}
93-
94-
{description && (
95-
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
96-
{description}
97-
</p>
98-
)}
105+
</div>
106+
{expandedContent}
99107
</div>
100-
</div>
101-
);
102-
};
108+
);
109+
},
110+
);
103111

104112
export default ResourceLinkView;

‎client/src/components/ToolResults.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { validateToolOutput, hasOutputSchema } from "@/utils/schemaUtils";
1010
interface ToolResultsProps {
1111
toolResult: CompatibilityCallToolResult | null;
1212
selectedTool: Tool | null;
13+
resourceContent: Record<string, string>;
14+
onReadResource?: (uri: string) => void;
1315
}
1416

1517
const checkContentCompatibility = (
@@ -62,7 +64,12 @@ const checkContentCompatibility = (
6264
}
6365
};
6466

65-
const ToolResults = ({ toolResult, selectedTool }: ToolResultsProps) => {
67+
const ToolResults = ({
68+
toolResult,
69+
selectedTool,
70+
resourceContent,
71+
onReadResource,
72+
}: ToolResultsProps) => {
6673
if (!toolResult) return null;
6774

6875
if ("content" in toolResult) {
@@ -207,6 +214,8 @@ const ToolResults = ({ toolResult, selectedTool }: ToolResultsProps) => {
207214
name={item.name}
208215
description={item.description}
209216
mimeType={item.mimeType}
217+
resourceContent={resourceContent[item.uri] || ""}
218+
onReadResource={onReadResource}
210219
/>
211220
)}
212221
</div>

‎client/src/components/ToolsTab.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const ToolsTab = ({
2828
setSelectedTool,
2929
toolResult,
3030
nextCursor,
31+
resourceContent,
32+
onReadResource,
3133
}: {
3234
tools: Tool[];
3335
listTools: () => void;
@@ -38,6 +40,8 @@ const ToolsTab = ({
3840
toolResult: CompatibilityCallToolResult | null;
3941
nextCursor: ListToolsResult["nextCursor"];
4042
error: string | null;
43+
resourceContent: Record<string, string>;
44+
onReadResource?: (uri: string) => void;
4145
}) => {
4246
const [params, setParams] = useState<Record<string, unknown>>({});
4347
const [isToolRunning, setIsToolRunning] = useState(false);
@@ -267,6 +271,8 @@ const ToolsTab = ({
267271
<ToolResults
268272
toolResult={toolResult}
269273
selectedTool={selectedTool}
274+
resourceContent={resourceContent}
275+
onReadResource={onReadResource}
270276
/>
271277
</div>
272278
) : (

0 commit comments

Comments
 (0)