create sampling response form

client/src/components/DynamicJsonForm.tsx

@@ -36,6 +36,7 @@ interface DynamicJsonFormProps {
   value: JsonValue;
   onChange: (value: JsonValue) => void;
   maxDepth?: number;
+  defaultIsJsonMode?: boolean;
 }
 
 const DynamicJsonForm = ({
@@ -43,8 +44,9 @@ const DynamicJsonForm = ({
   value,
   onChange,
   maxDepth = 3,
+  defaultIsJsonMode = false,
 }: DynamicJsonFormProps) => {
-  const [isJsonMode, setIsJsonMode] = useState(false);
+  const [isJsonMode, setIsJsonMode] = useState(defaultIsJsonMode);
   const [jsonError, setJsonError] = useState<string>();
   // Store the raw JSON string to allow immediate feedback during typing
   // while deferring parsing until the user stops typing
@@ -370,11 +372,21 @@ const DynamicJsonForm = ({
     <div className="space-y-4">
       <div className="flex justify-end space-x-2">
         {isJsonMode && (
-          <Button variant="outline" size="sm" onClick={formatJson}>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={formatJson}
+          >
             Format JSON
           </Button>
         )}
-        <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={handleSwitchToFormMode}
+        >
           {isJsonMode ? "Switch to Form" : "Switch to JSON"}
         </Button>
       </div>