feat: Copy the input parameters of tools

Author: alex210501

client/src/components/ToolsTab.tsx

@@ -13,11 +13,20 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Loader2, Send, ChevronDown, ChevronUp } from "lucide-react";
+import {
+  Loader2,
+  Send,
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  CheckCheck,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
+import { useToast } from "@/lib/hooks/useToast";
+import useCopy from "@/lib/hooks/useCopy";
 
 const ToolsTab = ({
   tools,
@@ -46,6 +55,8 @@ const ToolsTab = ({
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
+  const { toast } = useToast();
+  const { copied, setCopied } = useCopy();
 
   useEffect(() => {
     const params = Object.entries(
@@ -245,29 +256,54 @@ const ToolsTab = ({
                     </div>
                   </div>
                 )}
-                <Button
-                  onClick={async () => {
-                    try {
-                      setIsToolRunning(true);
-                      await callTool(selectedTool.name, params);
-                    } finally {
-                      setIsToolRunning(false);
-                    }
-                  }}
-                  disabled={isToolRunning}
-                >
-                  {isToolRunning ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Running...
-                    </>
-                  ) : (
-                    <>
-                      <Send className="w-4 h-4 mr-2" />
-                      Run Tool
-                    </>
-                  )}
-                </Button>
+                <div className="flex gap-2">
+                  <Button
+                    onClick={async () => {
+                      try {
+                        setIsToolRunning(true);
+                        await callTool(selectedTool.name, params);
+                      } finally {
+                        setIsToolRunning(false);
+                      }
+                    }}
+                    disabled={isToolRunning}
+                  >
+                    {isToolRunning ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Running...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="w-4 h-4 mr-2" />
+                        Run Tool
+                      </>
+                    )}
+                  </Button>
+                  <Button
+                    onClick={async () => {
+                      try {
+                        navigator.clipboard.writeText(
+                          JSON.stringify(params, null, 2),
+                        );
+                        setCopied(true);
+                      } catch (error) {
+                        toast({
+                          title: "Error",
+                          description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+                          variant: "destructive",
+                        });
+                      }
+                    }}
+                  >
+                    {copied ? (
+                      <CheckCheck className="h-4 w-4 mr-2 dark:text-green-700 text-green-600" />
+                    ) : (
+                      <Copy className="h-4 w-4 mr-2" />
+                    )}
+                    Copy Input
+                  </Button>
+                </div>
                 <ToolResults
                   toolResult={toolResult}
                   selectedTool={selectedTool}