Change position of generate with ai button in data schema (#1739)

skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx

@@ -61,6 +61,7 @@ function WorkflowDataSchemaInputGroup({
 
   return (
     <div className="space-y-2">
+      <div className="flex h-7 items-center justify-between">
         <div className="flex gap-4">
           <div className="flex gap-2">
             <Label className="text-xs text-slate-300">Data Schema</Label>
@@ -69,24 +70,32 @@ function WorkflowDataSchemaInputGroup({
           <Checkbox
             checked={value !== "null"}
             onCheckedChange={(checked) => {
-            onChange(checked ? JSON.stringify(exampleValue, null, 2) : "null");
+              onChange(
+                checked ? JSON.stringify(exampleValue, null, 2) : "null",
+              );
             }}
           />
         </div>
+        {value !== "null" && !generateWithAIActive && (
+          <Button
+            variant="tertiary"
+            className="h-7 text-xs"
+            onClick={() => {
+              setGenerateWithAIActive(true);
+            }}
+          >
+            <MagicWandIcon className="mr-2 size-4" />
+            Generate with AI
+          </Button>
+        )}
+      </div>
+
       {value !== "null" && (
         <div className="space-y-2">
-          <CodeEditor
+          {generateWithAIActive ? (
-            language="json"
-            value={value}
-            onChange={onChange}
-            className="nowheel nopan"
-            fontSize={8}
-          />
-          {value !== "null" &&
-            (generateWithAIActive ? (
             <div className="flex w-full items-center rounded-xl border px-4">
               <Cross2Icon
-                  className="size-4"
+                className="size-4 cursor-pointer"
                 onClick={() => {
                   setGenerateWithAIActive(false);
                   setGenerateWithAIPrompt("");
@@ -104,25 +113,21 @@ function WorkflowDataSchemaInputGroup({
                 <ReloadIcon className="size-4 animate-spin" />
               ) : (
                 <PaperPlaneIcon
-                    className="size-4"
+                  className="size-4 cursor-pointer"
                   onClick={() => {
                     getDataSchemaSuggestionMutation.mutate();
                   }}
                 />
               )}
             </div>
-            ) : (
+          ) : null}
-              <Button
+          <CodeEditor
-                variant="tertiary"
+            language="json"
-                size="sm"
+            value={value}
-                onClick={() => {
+            onChange={onChange}
-                  setGenerateWithAIActive(true);
+            className="nowheel nopan"
-                }}
+            fontSize={8}
-              >
+          />
-                <MagicWandIcon className="mr-2 size-4" />
-                Generate with AI
-              </Button>
-            ))}
         </div>
       )}
     </div>