From 539de0fd851612ab9392b0dd81edb3ac252249be Mon Sep 17 00:00:00 2001
From: NicolasMontone <montonenicolas01@gmail.com>
Date: Tue, 1 Apr 2025 17:18:40 -0300
Subject: [PATCH] add copy button

---
 client/src/components/JsonView.tsx |  2 +-
 client/src/components/ToolsTab.tsx | 38 ++++++++++++++++++++++++++----
 client/src/index.css               | 26 --------------------
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index e2922f0..3b9ec25 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -33,7 +33,7 @@ const JsonView = memo(
         : data;
 
     return (
-      <div className="font-mono text-sm transition-all duration-300 ">
+      <div className="font-mono text-sm transition-all duration-300">
         <JsonNode
           data={normalizedData as JsonValue}
           name={name}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 6e85531..694377e 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -13,10 +13,11 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Send } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Copy, Send, CheckCheck } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
+import { toast } from "react-toastify";
 
 const ToolsTab = ({
   tools,
@@ -43,6 +44,22 @@ const ToolsTab = ({
     setParams({});
   }, [selectedTool]);
 
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    try {
+      navigator.clipboard.writeText(JSON.stringify(toolResult));
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 500);
+    } catch (error) {
+      toast.error(
+        `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }, [toolResult]);
+
   const renderToolResult = () => {
     if (!toolResult) return null;
 
@@ -52,7 +69,8 @@ const ToolsTab = ({
         return (
           <>
             <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
-            <div className="p-4 border rounded">
+            <div className="p-4 border rounded relative">
+              <Copy className="size-4 text-primary" />
               <JsonView data={toolResult} />
             </div>
             <h4 className="font-semibold mb-2">Errors:</h4>
@@ -75,7 +93,19 @@ const ToolsTab = ({
           {structuredResult.content.map((item, index) => (
             <div key={index} className="mb-2">
               {item.type === "text" && (
-                <div className="p-4 border rounded">
+                <div className="p-4 border rounded relative">
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="absolute top-2 right-2"
+                    onClick={handleCopy}
+                  >
+                    {copied ? (
+                      <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
+                    ) : (
+                      <Copy className="size-4 text-foreground" />
+                    )}
+                  </Button>
                   <JsonView data={item.text} />
                 </div>
               )}
diff --git a/client/src/index.css b/client/src/index.css
index 1795f58..11c6f23 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -38,29 +38,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-button[role="checkbox"] {
-  padding: 0;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -69,9 +46,6 @@ button[role="checkbox"] {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
 }
 
 @layer base {