From c4587bafb82b44443be245639369e39f96baae8b Mon Sep 17 00:00:00 2001 From: Nandha Reddy Date: Thu, 26 Jun 2025 20:22:28 +1000 Subject: [PATCH 1/4] feat: Add resource_link content type support to ToolResults component Add ResourceLinkView component for displaying resource links --- client/src/components/ResourceLinkView.tsx | 104 ++++++++++++++++++ client/src/components/ToolResults.tsx | 9 ++ .../components/__tests__/ToolsTab.test.tsx | 25 +++++ 3 files changed, 138 insertions(+) create mode 100644 client/src/components/ResourceLinkView.tsx diff --git a/client/src/components/ResourceLinkView.tsx b/client/src/components/ResourceLinkView.tsx new file mode 100644 index 000000000..94fce4292 --- /dev/null +++ b/client/src/components/ResourceLinkView.tsx @@ -0,0 +1,104 @@ +import { useState, useCallback, useEffect } from "react"; +import { Copy, CheckCheck } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { useToast } from "@/lib/hooks/useToast"; + +interface ResourceLinkViewProps { + uri: string; + name?: string; + description?: string; + mimeType?: string; +} + +const ResourceLinkView = ({ + uri, + name, + description, + mimeType, +}: ResourceLinkViewProps) => { + const { toast } = useToast(); + const [copied, setCopied] = useState(false); + + useEffect(() => { + let timeoutId: NodeJS.Timeout; + if (copied) { + timeoutId = setTimeout(() => { + setCopied(false); + }, 500); + } + return () => { + if (timeoutId) { + clearTimeout(timeoutId); + } + }; + }, [copied]); + + const handleCopyUri = useCallback(() => { + try { + navigator.clipboard.writeText(uri); + setCopied(true); + } catch (error) { + toast({ + title: "Error", + description: `There was an error copying URI to clipboard: ${error instanceof Error ? error.message : String(error)}`, + variant: "destructive", + }); + } + }, [uri, toast]); + + const displayName = name || new URL(uri).pathname.split("/").pop() || uri; + + return ( +
+ + +
+
+ + {uri} + + {mimeType && ( + + {mimeType} + + )} +
+ + {name && ( +
+ {name} +
+ )} + + {description && ( +

+ {description} +

+ )} +
+
+ ); +}; + +export default ResourceLinkView; diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx index c6d907003..cf6bb90d2 100644 --- a/client/src/components/ToolResults.tsx +++ b/client/src/components/ToolResults.tsx @@ -1,4 +1,5 @@ import JsonView from "./JsonView"; +import ResourceLinkView from "./ResourceLinkView"; import { CallToolResultSchema, CompatibilityCallToolResult, @@ -200,6 +201,14 @@ const ToolResults = ({ toolResult, selectedTool }: ToolResultsProps) => { ) : ( ))} + {item.type === "resource_link" && ( + + )} ))} diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx index c9f9b3152..f954b6bd7 100644 --- a/client/src/components/__tests__/ToolsTab.test.tsx +++ b/client/src/components/__tests__/ToolsTab.test.tsx @@ -360,4 +360,29 @@ describe("ToolsTab", () => { ).not.toBeInTheDocument(); }); }); + + describe("Resource Link Content Type", () => { + it("should render resource_link content type", () => { + const result = { + content: [ + { + type: "resource_link", + uri: "https://example.com/resource", + name: "Test Resource", + description: "A test resource", + mimeType: "application/json", + }, + ], + }; + + renderToolsTab({ selectedTool: mockTools[0], toolResult: result }); + + expect( + screen.getByText("https://example.com/resource"), + ).toBeInTheDocument(); + expect(screen.getByText("Test Resource")).toBeInTheDocument(); + expect(screen.getByText("A test resource")).toBeInTheDocument(); + expect(screen.getByText("application/json")).toBeInTheDocument(); + }); + }); }); From 21740bbd166c6d0843480088c13ae3c8cf5b1237 Mon Sep 17 00:00:00 2001 From: Nandha Reddy Date: Thu, 26 Jun 2025 20:22:28 +1000 Subject: [PATCH 2/4] feat: Add resource_link content type support to ToolResults component Add ResourceLinkView component for displaying resource links --- client/src/components/ResourceLinkView.tsx | 104 +++++++++++++++++++++ client/src/components/ToolResults.tsx | 9 ++ 2 files changed, 113 insertions(+) create mode 100644 client/src/components/ResourceLinkView.tsx diff --git a/client/src/components/ResourceLinkView.tsx b/client/src/components/ResourceLinkView.tsx new file mode 100644 index 000000000..94fce4292 --- /dev/null +++ b/client/src/components/ResourceLinkView.tsx @@ -0,0 +1,104 @@ +import { useState, useCallback, useEffect } from "react"; +import { Copy, CheckCheck } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { useToast } from "@/lib/hooks/useToast"; + +interface ResourceLinkViewProps { + uri: string; + name?: string; + description?: string; + mimeType?: string; +} + +const ResourceLinkView = ({ + uri, + name, + description, + mimeType, +}: ResourceLinkViewProps) => { + const { toast } = useToast(); + const [copied, setCopied] = useState(false); + + useEffect(() => { + let timeoutId: NodeJS.Timeout; + if (copied) { + timeoutId = setTimeout(() => { + setCopied(false); + }, 500); + } + return () => { + if (timeoutId) { + clearTimeout(timeoutId); + } + }; + }, [copied]); + + const handleCopyUri = useCallback(() => { + try { + navigator.clipboard.writeText(uri); + setCopied(true); + } catch (error) { + toast({ + title: "Error", + description: `There was an error copying URI to clipboard: ${error instanceof Error ? error.message : String(error)}`, + variant: "destructive", + }); + } + }, [uri, toast]); + + const displayName = name || new URL(uri).pathname.split("/").pop() || uri; + + return ( +
+ + +
+
+ + {uri} + + {mimeType && ( + + {mimeType} + + )} +
+ + {name && ( +
+ {name} +
+ )} + + {description && ( +

+ {description} +

+ )} +
+
+ ); +}; + +export default ResourceLinkView; diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx index c6d907003..cf6bb90d2 100644 --- a/client/src/components/ToolResults.tsx +++ b/client/src/components/ToolResults.tsx @@ -1,4 +1,5 @@ import JsonView from "./JsonView"; +import ResourceLinkView from "./ResourceLinkView"; import { CallToolResultSchema, CompatibilityCallToolResult, @@ -200,6 +201,14 @@ const ToolResults = ({ toolResult, selectedTool }: ToolResultsProps) => { ) : ( ))} + {item.type === "resource_link" && ( + + )} ))} From 0dc7a5021800bc88ffe3d6eb060d63276fa9f5fe Mon Sep 17 00:00:00 2001 From: Nandha Reddy Date: Wed, 9 Jul 2025 05:15:46 +1000 Subject: [PATCH 3/4] feat: Enhance ResourceLinkView with expandable resource content view Add click-to-expand functionality for inline resource content display --- client/src/App.tsx | 15 +- client/src/components/ResourceLinkView.tsx | 184 +++++++++++---------- client/src/components/ToolResults.tsx | 11 +- client/src/components/ToolsTab.tsx | 6 + 4 files changed, 126 insertions(+), 90 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 3ceafcae4..cff51b4ff 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -80,6 +80,9 @@ const App = () => { ResourceTemplate[] >([]); const [resourceContent, setResourceContent] = useState(""); + const [resourceContentMap, setResourceContentMap] = useState< + Record + >({}); const [prompts, setPrompts] = useState([]); const [promptContent, setPromptContent] = useState(""); const [tools, setTools] = useState([]); @@ -461,7 +464,12 @@ const App = () => { ReadResourceResultSchema, "resources", ); - setResourceContent(JSON.stringify(response, null, 2)); + const content = JSON.stringify(response, null, 2); + setResourceContent(content); + setResourceContentMap((prev) => ({ + ...prev, + [uri]: content, + })); }; const subscribeToResource = async (uri: string) => { @@ -863,6 +871,11 @@ const App = () => { toolResult={toolResult} nextCursor={nextToolCursor} error={errors.tools} + resourceContent={resourceContentMap} + onReadResource={(uri: string) => { + clearError("resources"); + readResource(uri); + }} /> void; } -const ResourceLinkView = ({ - uri, - name, - description, - mimeType, -}: ResourceLinkViewProps) => { - const { toast } = useToast(); - const [copied, setCopied] = useState(false); +const ResourceLinkView = memo( + ({ + uri, + name, + description, + mimeType, + resourceContent, + onReadResource, + }: ResourceLinkViewProps) => { + const [{ expanded, loading }, setState] = useState({ + expanded: false, + loading: false, + }); - useEffect(() => { - let timeoutId: NodeJS.Timeout; - if (copied) { - timeoutId = setTimeout(() => { - setCopied(false); - }, 500); - } - return () => { - if (timeoutId) { - clearTimeout(timeoutId); - } - }; - }, [copied]); - - const handleCopyUri = useCallback(() => { - try { - navigator.clipboard.writeText(uri); - setCopied(true); - } catch (error) { - toast({ - title: "Error", - description: `There was an error copying URI to clipboard: ${error instanceof Error ? error.message : String(error)}`, - variant: "destructive", - }); - } - }, [uri, toast]); - - const displayName = name || new URL(uri).pathname.split("/").pop() || uri; + const expandedContent = useMemo( + () => + expanded && resourceContent ? ( +
+
+ Resource: +
+ +
+ ) : null, + [expanded, resourceContent], + ); - return ( -
- + const handleClick = useCallback(() => { + if (!onReadResource) return; + if (!expanded) { + setState((prev) => ({ ...prev, expanded: true, loading: true })); + onReadResource(uri); + setState((prev) => ({ ...prev, loading: false })); + } else { + setState((prev) => ({ ...prev, expanded: false })); + } + }, [expanded, onReadResource, uri]); -
-
- - {uri} - - {mimeType && ( - - {mimeType} - - )} -
+ const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if ((e.key === "Enter" || e.key === " ") && onReadResource) { + e.preventDefault(); + handleClick(); + } + }, + [handleClick, onReadResource], + ); - {name && ( -
- {name} + return ( +
+
+
+
+ + {uri} + +
+ {mimeType && ( + + {mimeType} + + )} + {onReadResource && ( +
+ {name && ( +
+ {name} +
+ )} + {description && ( +

+ {description} +

+ )}
- )} - - {description && ( -

- {description} -

- )} +
+ {expandedContent}
-
- ); -}; + ); + }, +); export default ResourceLinkView; diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx index cf6bb90d2..f24500662 100644 --- a/client/src/components/ToolResults.tsx +++ b/client/src/components/ToolResults.tsx @@ -10,6 +10,8 @@ import { validateToolOutput, hasOutputSchema } from "@/utils/schemaUtils"; interface ToolResultsProps { toolResult: CompatibilityCallToolResult | null; selectedTool: Tool | null; + resourceContent: Record; + onReadResource?: (uri: string) => void; } const checkContentCompatibility = ( @@ -62,7 +64,12 @@ const checkContentCompatibility = ( } }; -const ToolResults = ({ toolResult, selectedTool }: ToolResultsProps) => { +const ToolResults = ({ + toolResult, + selectedTool, + resourceContent, + onReadResource, +}: ToolResultsProps) => { if (!toolResult) return null; if ("content" in toolResult) { @@ -207,6 +214,8 @@ const ToolResults = ({ toolResult, selectedTool }: ToolResultsProps) => { name={item.name} description={item.description} mimeType={item.mimeType} + resourceContent={resourceContent[item.uri] || ""} + onReadResource={onReadResource} /> )}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index 9e4bc69a1..3c7db84e4 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -28,6 +28,8 @@ const ToolsTab = ({ setSelectedTool, toolResult, nextCursor, + resourceContent, + onReadResource, }: { tools: Tool[]; listTools: () => void; @@ -38,6 +40,8 @@ const ToolsTab = ({ toolResult: CompatibilityCallToolResult | null; nextCursor: ListToolsResult["nextCursor"]; error: string | null; + resourceContent: Record; + onReadResource?: (uri: string) => void; }) => { const [params, setParams] = useState>({}); const [isToolRunning, setIsToolRunning] = useState(false); @@ -267,6 +271,8 @@ const ToolsTab = ({
) : ( From 914f6bb7c37d2e2461a4eadbfc1a5ade6648c7de Mon Sep 17 00:00:00 2001 From: Nandha Reddy Date: Wed, 9 Jul 2025 18:23:56 +1000 Subject: [PATCH 4/4] test: add resource link test coverage --- .../components/__tests__/ToolsTab.test.tsx | 100 +++++++++++++++--- 1 file changed, 88 insertions(+), 12 deletions(-) diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx index 1233e9b85..fba1bba4b 100644 --- a/client/src/components/__tests__/ToolsTab.test.tsx +++ b/client/src/components/__tests__/ToolsTab.test.tsx @@ -55,6 +55,8 @@ describe("ToolsTab", () => { toolResult: null, nextCursor: "", error: null, + resourceContent: {}, + onReadResource: jest.fn(), }; const renderToolsTab = (props = {}) => { @@ -383,27 +385,101 @@ describe("ToolsTab", () => { }); describe("Resource Link Content Type", () => { - it("should render resource_link content type", () => { + it("should render resource_link content type and handle expansion", async () => { + const mockOnReadResource = jest.fn(); + const resourceContent = { + "test://static/resource/1": JSON.stringify({ + contents: [ + { + uri: "test://static/resource/1", + name: "Resource 1", + mimeType: "text/plain", + text: "Resource 1: This is a plaintext resource", + }, + ], + }), + }; + const result = { content: [ { type: "resource_link", - uri: "https://example.com/resource", - name: "Test Resource", - description: "A test resource", - mimeType: "application/json", + uri: "test://static/resource/1", + name: "Resource 1", + description: "Resource 1: plaintext resource", + mimeType: "text/plain", + }, + { + type: "resource_link", + uri: "test://static/resource/2", + name: "Resource 2", + description: "Resource 2: binary blob resource", + mimeType: "application/octet-stream", + }, + { + type: "resource_link", + uri: "test://static/resource/3", + name: "Resource 3", + description: "Resource 3: plaintext resource", + mimeType: "text/plain", }, ], }; - renderToolsTab({ selectedTool: mockTools[0], toolResult: result }); + renderToolsTab({ + selectedTool: mockTools[0], + toolResult: result, + resourceContent, + onReadResource: mockOnReadResource, + }); - expect( - screen.getByText("https://example.com/resource"), - ).toBeInTheDocument(); - expect(screen.getByText("Test Resource")).toBeInTheDocument(); - expect(screen.getByText("A test resource")).toBeInTheDocument(); - expect(screen.getByText("application/json")).toBeInTheDocument(); + ["1", "2", "3"].forEach((id) => { + expect( + screen.getByText(`test://static/resource/${id}`), + ).toBeInTheDocument(); + expect(screen.getByText(`Resource ${id}`)).toBeInTheDocument(); + }); + + expect(screen.getAllByText("text/plain")).toHaveLength(2); + expect(screen.getByText("application/octet-stream")).toBeInTheDocument(); + + const expandButtons = screen.getAllByRole("button", { + name: /expand resource/i, + }); + expect(expandButtons).toHaveLength(3); + expect(screen.queryByText("Resource:")).not.toBeInTheDocument(); + + expandButtons.forEach((button) => { + expect(button).toHaveAttribute("aria-expanded", "false"); + }); + + const resource1Button = screen.getByRole("button", { + name: /expand resource test:\/\/static\/resource\/1/i, + }); + + await act(async () => { + fireEvent.click(resource1Button); + }); + + expect(mockOnReadResource).toHaveBeenCalledWith( + "test://static/resource/1", + ); + expect(screen.getByText("Resource:")).toBeInTheDocument(); + expect(document.body).toHaveTextContent("contents:"); + expect(document.body).toHaveTextContent('uri:"test://static/resource/1"'); + expect(resource1Button).toHaveAttribute("aria-expanded", "true"); + + await act(async () => { + fireEvent.click(resource1Button); + }); + + expect(screen.queryByText("Resource:")).not.toBeInTheDocument(); + expect(document.body).not.toHaveTextContent("contents:"); + expect(document.body).not.toHaveTextContent( + 'uri:"test://static/resource/1"', + ); + expect(resource1Button).toHaveAttribute("aria-expanded", "false"); + expect(mockOnReadResource).toHaveBeenCalledTimes(1); }); }); });