[Local Editor Styling Updates] (#812)

[Local Editor Styling Updates]
lastmile-ai · Jan 9, 2024 · 3cfef56 · 3cfef56
2 parents 72a1ef9 + fe5d9b9
commit 3cfef56
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 47 deletions.
diff --git a/cookbooks/Getting-Started/travel.aiconfig.json b/cookbooks/Getting-Started/travel.aiconfig.json
@@ -2,7 +2,9 @@
   "name": "NYC Trip Planner",
   "schema_version": "latest",
   "metadata": {
-    "parameters": {},
+    "parameters": {
+      "": ""
+    },
     "models": {
       "gpt-3.5-turbo": {
         "model": "gpt-3.5-turbo",
@@ -21,8 +23,7 @@
   "prompts": [
     {
       "name": "get_activities",
-      "input": "Tell me 10 fun attractions to do in NYC.",
-      "outputs": []
+      "input": "Tell me 10 fun attractions to do in NYC."
     },
     {
       "name": "gen_itinerary",
@@ -32,8 +33,7 @@
         "parameters": {
           "order_by": "geographic location"
         }
-      },
-      "outputs": []
+      }
     }
   ],
   "$schema": "https://json.schemastore.org/aiconfig-1.0"

diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -228,8 +228,8 @@ export default function Editor() {
             to: "pink",
             deg: 45,
           },
-
-          globalStyles: () => ({
+          // local editor theme
+          globalStyles: (local) => ({
             ".editorBackground": {
               background:
                 "radial-gradient(ellipse at top,#08122d,#030712),radial-gradient(ellipse at bottom,#030712,#030712)",
@@ -253,6 +253,11 @@ export default function Editor() {
                 maxHeight: "16px",
                 fontFamily:
                   "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+                border: "none",
+                borderRadius: "4px",
+                padding: "4px",
+                margin: "0px",
+                backgroundColor: "transparent",
               },
             },
             ".cellStyle": {
@@ -272,6 +277,9 @@ export default function Editor() {
                   outlineOffset: "-1px",
                 },
               },
+              ".mantine-InputWrapper-label": {
+                display: "none",
+              },
             },
             ".sidePanel": {
               border: "1px solid rgba(226,232,255,.1)",
@@ -286,6 +294,14 @@ export default function Editor() {
                   outlineOffset: "-1px",
                 },
               },
+              textarea: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
             },
             ".divider": {
               borderTopWidth: "1px",
@@ -297,6 +313,9 @@ export default function Editor() {
               color: "white",
               borderRadius: "0",
               height: "auto",
+              "&:hover": {
+                background: "#ff46f8",
+              },
             },
             ".actionTabsPanel": {
               width: "400px",
@@ -309,6 +328,62 @@ export default function Editor() {
               justifyContent: "space-between",
               alignItems: "center",
             },
+
+            ".parametersContainer": {
+              maxWidth: "1250px",
+              maxHeight: "-webkit-fill-available",
+              margin: "16px auto",
+              padding: "0",
+              backgroundColor: "rgba(226,232,255,.1)",
+              borderRadius: "4px",
+              border: "1px solid rgba(226,232,255,.1) !important",
+              button: {
+                ":hover": {
+                  backgroundColor: "rgba(226,232,255,.1)",
+                },
+              },
+              input: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                borderRadius: "4px",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
+              textarea: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                borderRadius: "4px",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
+            },
+            ".addParameterButton": {
+              position: "sticky",
+              left: "0",
+              bottom: "0",
+              margin: "16px 0 0 0",
+              background: "#ff1cf7",
+              "&:hover": {
+                background: "#ff46f8",
+              },
+            },
+            ".mantine-Slider-thumb": {
+              border: "0.25rem solid #ff1cf7",
+              backgroundColor: "white",
+            },
+            ".mantine-Slider-bar": {
+              backgroundColor: "#ff1cf7",
+            },
+            ".mantine-Tabs-tab[data-active]": {
+              borderBottom: "solid 1px #ff1cf7",
+              ":hover": {
+                borderBottom: "solid 1px #ff1cf7",
+              },
+            },
           }),
         }}
       >

diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
@@ -90,7 +90,11 @@ export type RunPromptStreamErrorCallback = (
 ) => void;
 
 export type AIConfigCallbacks = {
-  addPrompt: (promptName: string, prompt: Prompt, index: number) => Promise<{ aiconfig: AIConfig }>;
+  addPrompt: (
+    promptName: string,
+    prompt: Prompt,
+    index: number
+  ) => Promise<{ aiconfig: AIConfig }>;
   clearOutputs: () => Promise<{ aiconfig: AIConfig }>;
   deletePrompt: (promptName: string) => Promise<void>;
   getModels: (search: string) => Promise<string[]>;
@@ -563,24 +567,21 @@ export default function EditorContainer({
   );
 
   const clearOutputsCallback = callbacks.clearOutputs;
-  const onClearOutputs = useCallback(
-    async () => {
-      dispatch({
-        type: "CLEAR_OUTPUTS",
+  const onClearOutputs = useCallback(async () => {
+    dispatch({
+      type: "CLEAR_OUTPUTS",
+    });
+    try {
+      await clearOutputsCallback();
+    } catch (err: unknown) {
+      const message = (err as RequestCallbackError).message ?? null;
+      showNotification({
+        title: "Error clearing outputs",
+        message,
+        color: "red",
       });
-      try {
-        await clearOutputsCallback();
-      } catch (err: unknown) {
-        const message = (err as RequestCallbackError).message ?? null;
-        showNotification({
-          title: "Error clearing outputs",
-          message,
-          color: "red",
-        });
-      }
-    },
-    [clearOutputsCallback, dispatch]
-  );
+    }
+  }, [clearOutputsCallback, dispatch]);
 
   const runPromptCallback = callbacks.runPrompt;
 
@@ -856,24 +857,29 @@ export default function EditorContainer({
       <Container maw="80rem">
         <Flex justify="flex-end" mt="md" mb="xs">
           <Group>
-            <Button loading={undefined} onClick={onClearOutputs} size="xs" variant="gradient">
-              Clear Outputs
-            </Button>
-
-          <Tooltip
-            label={isDirty ? "Save changes to config" : "No unsaved changes"}
-          >
             <Button
-              leftIcon={<IconDeviceFloppy />}
-              loading={isSaving}
-              onClick={onSave}
-              disabled={!isDirty}
+              loading={undefined}
+              onClick={onClearOutputs}
               size="xs"
               variant="gradient"
             >
-              Save
+              Clear Outputs
             </Button>
-          </Tooltip>
+
+            <Tooltip
+              label={isDirty ? "Save changes to config" : "No unsaved changes"}
+            >
+              <Button
+                leftIcon={<IconDeviceFloppy />}
+                loading={isSaving}
+                onClick={onSave}
+                disabled={!isDirty}
+                size="xs"
+                variant="gradient"
+              >
+                Save
+              </Button>
+            </Tooltip>
           </Group>
         </Flex>
         <ConfigNameDescription

diff --git a/python/src/aiconfig/editor/client/src/components/GlobalParametersContainer.tsx b/python/src/aiconfig/editor/client/src/components/GlobalParametersContainer.tsx
@@ -26,7 +26,7 @@ export default memo(function GlobalParametersContainer({
   const { classes } = useStyles();
 
   return (
-    <Container maw="80rem" className={classes.parametersContainer}>
+    <Container maw="80rem" className="parametersContainer">
       <Accordion
         styles={{
           item: { borderBottom: 0 },

diff --git a/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx b/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx
@@ -111,14 +111,13 @@ const ParameterInput = memo(function ParameterInput(props: {
             debouncedCellParameterUpdate(parameterName, event.target.value);
           }}
         />
+        <ActionIcon
+          onClick={() => removeParameter(parameterName)}
+          disabled={isReadonly}
+        >
+          <IconTrash size={16} color={isReadonly ? "grey" : "red"} />
+        </ActionIcon>
       </Stack>
-      <ActionIcon
-        onClick={() => removeParameter(parameterName)}
-        style={{ marginTop: -50 }}
-        disabled={isReadonly}
-      >
-        <IconTrash size={16} color={isReadonly ? "grey" : "red"} />
-      </ActionIcon>
     </Group>
   );
 });
@@ -247,7 +246,7 @@ export default memo(function ParametersRenderer(props: {
       </Stack>
       {isReadonly ? null : (
         <Tooltip label="Add parameter">
-          <ActionIcon onClick={addParameter}>
+          <ActionIcon onClick={addParameter} className="addParameterButton">
             <IconPlus size={16} />
           </ActionIcon>
         </Tooltip>