Merge branch 'main' into fix/validate-json-on-tool-execution

client/src/components/ToolsTab.tsx

@@ -7,7 +7,11 @@ import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
-import { generateDefaultValue, isPropertyRequired } from "@/utils/schemaUtils";
+import {
+  generateDefaultValue,
+  isPropertyRequired,
+  normalizeUnionType,
+} from "@/utils/schemaUtils";
 import {
   CompatibilityCallToolResult,
   ListToolsResult,
@@ -19,11 +23,15 @@ import {
   ChevronDown,
   ChevronUp,
   AlertCircle,
+  Copy,
+  CheckCheck,
 } from "lucide-react";
 import { useEffect, useState, useRef } 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 } =>
@@ -59,6 +67,8 @@ const ToolsTab = ({
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
   const [isMetaExpanded, setIsMetaExpanded] = useState(false);
   const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
+  const { toast } = useToast();
+  const { copied, setCopied } = useCopy();
 
   useEffect(() => {
     const params = Object.entries(
@@ -118,7 +128,7 @@ const ToolsTab = ({
                 </p>
                 {Object.entries(selectedTool.inputSchema.properties ?? []).map(
                   ([key, value]) => {
-                    const prop = value as JsonSchemaType;
+                    const prop = normalizeUnionType(value as JsonSchemaType);
                     const inputSchema =
                       selectedTool.inputSchema as JsonSchemaType;
                     const required = isPropertyRequired(key, inputSchema);
@@ -162,7 +172,10 @@ const ToolsTab = ({
                             onChange={(e) =>
                               setParams({
                                 ...params,
-                                [key]: e.target.value,
+                                [key]:
+                                  e.target.value === ""
+                                    ? undefined
+                                    : e.target.value,
                               })
                             }
                             className="mt-1"
@@ -300,35 +313,60 @@ const ToolsTab = ({
                       </div>
                     </div>
                   )}
-                <Button
-                  onClick={async () => {
-                    // Validate JSON inputs before calling tool
-                    const hasValidationErrors = Object.values(
-                      formRefs.current,
-                    ).some((ref) => ref && !ref.validateJson().isValid);
-                    if (hasValidationErrors) return;
+                <div className="flex gap-2">
+                  <Button
+                    onClick={async () => {
+                      // Validate JSON inputs before calling tool
+                      const hasValidationErrors = Object.values(
+                        formRefs.current,
+                      ).some((ref) => ref && !ref.validateJson().isValid);
+                      if (hasValidationErrors) return;
 
-                    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>
+                      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 copying input to 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}