diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx index e9ef0d2d..7cb38667 100644 --- a/client/src/components/JsonView.tsx +++ b/client/src/components/JsonView.tsx @@ -5,6 +5,7 @@ import { Copy, CheckCheck } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useToast } from "@/lib/hooks/useToast"; import { getDataType, tryParseJson } from "@/utils/jsonUtils"; +import useCopy from "@/lib/hooks/useCopy"; interface JsonViewProps { data: unknown; @@ -25,21 +26,7 @@ const JsonView = memo( isError = false, }: JsonViewProps) => { 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 { copied, setCopied } = useCopy(); const normalizedData = useMemo(() => { return typeof data === "string" diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index 2eb682e5..04bd0465 100644 --- a/client/src/components/ToolsTab.tsx +++ b/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"; // Type guard to safely detect the optional _meta field without using `any` const hasMeta = (tool: Tool): tool is Tool & { _meta: unknown } => @@ -51,6 +60,8 @@ const ToolsTab = ({ const [isToolRunning, setIsToolRunning] = useState(false); const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false); const [isMetaExpanded, setIsMetaExpanded] = useState(false); + const { toast } = useToast(); + const { copied, setCopied } = useCopy(); useEffect(() => { const params = Object.entries( @@ -284,29 +295,54 @@ const ToolsTab = ({ )} - +