[gradio] Fix Margin of Title / Global Parameters (#1109)

[gradio] Fix Margin of Title / Global Parameters

# [gradio] Fix Margin of Title / Global Parameters

In gradio, the prompt menu button has styles overridden by gradio button
styles and therefore has no padding. This messes up the alignment of the
title/description and global parameters compared to the prompts:

![Screenshot 2024-02-01 at 11 23 00
AM](https://github.com/lastmile-ai/aiconfig/assets/5060851/d6f6ac96-f47e-4ccb-ad9f-47104433fb4d)

Similarly, in readOnly mode there is no prompt menu button but we still
had the left margin on the title/description and global parameters:
![Screenshot 2024-02-01 at 11 26 04
AM](https://github.com/lastmile-ai/aiconfig/assets/5060851/bdf2dd50-9436-45c8-940b-533f168aa55a)

This PR fixes both situations by:
- Explicitly setting the padding/margin for the prompt menu button in
gradio theme to have higher specificity than gradio button styles
- Dynamically handling the left margin of the title/description and
global parameters based on readOnly or not

Notes:
- Not sure how to test vscode theme here really since the actual vs code
package has different styles, etc. from what's in prod. As best-effort,
I just made sure the global parametersContainer and
parametersContainerReadonly styles override local style when set (so
they can be used as needed in vscode theme after)

## Testing:
- Gradio theme:
![Screenshot 2024-02-01 at 11 28 52
AM](https://github.com/lastmile-ai/aiconfig/assets/5060851/5155fec0-bf6f-4652-9e60-e5fa8f173364)
![Screenshot 2024-02-01 at 11 29 04
AM](https://github.com/lastmile-ai/aiconfig/assets/5060851/70447498-88e1-45b0-be50-1dfa039e91d1)

- Local theme:
![Screenshot 2024-02-01 at 11 29 13
AM](https://github.com/lastmile-ai/aiconfig/assets/5060851/0f9f8c2a-f5b9-44fa-b37f-5692f15e9d75)
![Screenshot 2024-02-01 at 11 29 21
AM](https://github.com/lastmile-ai/aiconfig/assets/5060851/46616263-c5df-4453-a7a0-bc418d4150de)

---
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with
[ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/1109).
* __->__ #1109
* #1105
* #1104
* #1103
* #1102
* #1101
* #1100
* #1099
* #1098
* #1097
* #1096
* #1095

Author: rholinshead

python/src/aiconfig/editor/client/src/components/ConfigNameDescription.tsx

@@ -99,7 +99,7 @@ export default memo(function ConfigNameDescription({
     <Stack
       ref={isEditing ? inputSectionRef : undefined}
       spacing="xs"
-      ml="36px"
+      ml={readOnly ? "auto" : "36px"}
       mr="0.5em"
     >
       {isEditing ? (

python/src/aiconfig/editor/client/src/components/GlobalParametersContainer.tsx

@@ -1,21 +1,43 @@
-import { Accordion, Text } from "@mantine/core";
+import { Accordion, Text, createStyles } from "@mantine/core";
 import { JSONObject } from "aiconfig";
-import { memo, useState } from "react";
+import { memo, useContext, useState } from "react";
 import ParametersRenderer from "./ParametersRenderer";
+import AIConfigContext from "../contexts/AIConfigContext";
 
 type Props = {
   initialValue: JSONObject;
   onUpdateParameters: (newParameters: JSONObject) => void;
 };
 
+const useStyles = createStyles(() => ({
+  parametersContainer: {
+    margin: "16px auto 16px 36px",
+  },
+  parametersContainerReadonly: {
+    margin: "16px auto",
+  },
+}));
+
 export default memo(function GlobalParametersContainer({
   initialValue,
   onUpdateParameters,
 }: Props) {
   const [isParametersDrawerOpen, setIsParametersDrawerOpen] = useState(false);
 
+  const { classes } = useStyles();
+  const { readOnly } = useContext(AIConfigContext);
+
   return (
-    <div className="parametersContainer">
+    // Set local and global classname. Global will override if specified
+    // Local is readonly or not. Global will always have parametersContainer class
+    // and if readonly, will also have parametersContainerReadonly class (to allow overrides)
+    <div
+      className={`${
+        readOnly
+          ? classes.parametersContainerReadonly
+          : classes.parametersContainer
+      } parametersContainer ${readOnly ? "parametersContainerReadonly" : ""}`}
+    >
       <Accordion
         styles={{
           item: { borderBottom: 0 },

python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx

@@ -156,8 +156,13 @@ export default memo(function PromptContainer({
             isRunning={prompt._ui.isRunning}
             isRunButtonDisabled={isRunButtonDisabled}
           />
-          <PromptOutputBar />
-          {prompt.outputs && <PromptOutputsRenderer outputs={prompt.outputs} />}
+
+          {prompt.outputs && prompt.outputs.length > 0 && (
+            <>
+              <PromptOutputBar />
+              <PromptOutputsRenderer outputs={prompt.outputs} />
+            </>
+          )}
         </Flex>
       </Card>
       <div className="sidePanel">

python/src/aiconfig/editor/client/src/components/prompt/PromptMenuButton.tsx

@@ -24,7 +24,7 @@ export default memo(function PromptMenuButton({
           size="xs"
           variant="subtle"
           color="dark"
-          className={classes.promptMenuButton}
+          className={`${classes.promptMenuButton} promptMenuButton`}
         >
           <IconDotsVertical size={14} />
         </Button>

python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx

@@ -13,7 +13,7 @@ export default memo(function PromptInputConfigRenderer({
   input,
   onChangeInput,
 }: Props) {
-  const {readOnly} = useContext(AIConfigContext);
+  const { readOnly } = useContext(AIConfigContext);
   return readOnly ? (
     <div style={{ padding: "0.5em" }}>
       <Spoiler
@@ -26,8 +26,9 @@ export default memo(function PromptInputConfigRenderer({
         <TextRenderer content={input as string} />
       </Spoiler>
     </div>
-  ): (
+  ) : (
     <Textarea
+      label="Prompt"
       value={input as string}
       onChange={(e) => onChangeInput(e.target.value)}
       disabled={readOnly}