From c4587bafb82b44443be245639369e39f96baae8b Mon Sep 17 00:00:00 2001
From: Nandha Reddy <nandhu4work@gmail.com>
Date: Thu, 26 Jun 2025 20:22:28 +1000
Subject: [PATCH] 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 00000000..94fce429
--- /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 (
+    <div
+      className="p-4 border rounded relative bg-gray-50 dark:bg-gray-800"
+      role="article"
+      aria-label={`Resource link: ${displayName}`}
+    >
+      <Button
+        size="icon"
+        variant="ghost"
+        className="absolute top-2 right-2"
+        onClick={handleCopyUri}
+      >
+        {copied ? (
+          <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
+        ) : (
+          <Copy className="size-4 text-foreground" />
+        )}
+      </Button>
+
+      <div className="pr-10">
+        <div className="flex items-start justify-between gap-2 mb-2">
+          <a
+            href={uri}
+            target="_blank"
+            rel="noopener noreferrer"
+            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"
+            aria-label={`Open resource: ${uri}`}
+          >
+            {uri}
+          </a>
+          {mimeType && (
+            <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">
+              {mimeType}
+            </span>
+          )}
+        </div>
+
+        {name && (
+          <div className="font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1">
+            {name}
+          </div>
+        )}
+
+        {description && (
+          <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ResourceLinkView;
diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx
index c6d90700..cf6bb90d 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) => {
                   ) : (
                     <JsonView data={item.resource} />
                   ))}
+                {item.type === "resource_link" && (
+                  <ResourceLinkView
+                    uri={item.uri}
+                    name={item.name}
+                    description={item.description}
+                    mimeType={item.mimeType}
+                  />
+                )}
               </div>
             ))}
           </div>
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index c9f9b315..f954b6bd 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();
+    });
+  });
 });