[AiConfig Branded Editor]

I styled the local editor to match ai-config brand colors. This is just iteration 1...more to come
lastmile-ai · Jan 5, 2024 · 71371bc · 71371bc
1 parent fd8c5c9
commit 71371bc
Show file tree

Hide file tree

Showing 13 changed files with 160 additions and 66 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/cookbooks/Getting-Started/travel.aiconfig.json b/cookbooks/Getting-Started/travel.aiconfig.json
@@ -1,8 +1,8 @@
 {
   "name": "NYC Trip Planner",
-  "description": "Intrepid explorer with ChatGPT and AIConfig",
   "schema_version": "latest",
   "metadata": {
+    "parameters": {},
     "models": {
       "gpt-3.5-turbo": {
         "model": "gpt-3.5-turbo",
@@ -17,10 +17,12 @@
     },
     "default_model": "gpt-3.5-turbo"
   },
+  "description": "Intrepid explorer with ChatGPT and AIConfig",
   "prompts": [
     {
       "name": "get_activities",
-      "input": "Tell me 10 fun attractions to do in NYC."
+      "input": "Tell me 10 fun attractions to do in NYC.",
+      "outputs": []
     },
     {
       "name": "gen_itinerary",
@@ -30,9 +32,9 @@
         "parameters": {
           "order_by": "geographic location"
         }
-      }
+      },
+      "outputs": []
     }
-  ]
-}
-
-
+  ],
+  "$schema": "https://json.schemastore.org/aiconfig-1.0"
+}
diff --git a/python/src/aiconfig/editor/client/public/images/aiconfigLogo.png b/python/src/aiconfig/editor/client/public/images/aiconfigLogo.png
diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -1,7 +1,7 @@
 import EditorContainer, {
   AIConfigCallbacks,
 } from "./components/EditorContainer";
-import { Flex, Loader, MantineProvider } from "@mantine/core";
+import { Flex, Loader, MantineProvider, Image } from "@mantine/core";
 import { AIConfig, InferenceSettings, JSONObject, Prompt } from "aiconfig";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ufetch } from "ufetch";
@@ -141,8 +141,118 @@ export default function Editor() {
   );
 
   return (
-    <div>
-      <MantineProvider withGlobalStyles withNormalizeCSS>
+    <div className="editorBackground">
+      <MantineProvider
+        withGlobalStyles
+        withNormalizeCSS
+        theme={{
+          colorScheme: "dark",
+
+          headings: {
+            fontFamily:
+              "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Arial, sans-serif",
+            sizes: {
+              h1: { fontSize: "2rem" },
+            },
+          },
+
+          defaultGradient: {
+            from: "pink",
+            to: "pink",
+            deg: 45,
+          },
+
+          globalStyles: (theme) => ({
+            ".editorBackground": {
+              background:
+                "radial-gradient(ellipse at top,#08122d,#030712),radial-gradient(ellipse at bottom,#030712,#030712)",
+              margin: "0 auto",
+              minHeight: "100vh",
+            },
+            ".monoFont": {
+              fontFamily:
+                "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            },
+            ".ghost": {
+              border: "none",
+              borderRadius: "4px",
+              padding: "4px",
+              margin: "0px",
+              backgroundColor: "transparent",
+              ":hover": {
+                backgroundColor: "rgba(226,232,255,.1)",
+              },
+              input: {
+                maxHeight: "16px",
+                fontFamily:
+                  "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+              },
+            },
+            ".cellStyle": {
+              border: "1px solid rgba(226,232,255,.1) !important",
+              background: "rgb(12 21 57 / 10%)",
+              flex: 1,
+              borderTopRightRadius: "0px",
+              borderBottomRightRadius: "0px",
+              ":hover": {
+                background: "rgba(255, 255, 255, 0.03) !important",
+              },
+              textarea: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
+            },
+            ".sidePanel": {
+              border: "1px solid rgba(226,232,255,.1)",
+              borderLeft: "none",
+              borderTopRightRadius: "4px",
+              borderBottomRightRadius: "4px",
+              input: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
+            },
+            ".divider": {
+              borderTopWidth: "1px",
+              borderTopColor: "rgba(226,232,255,.1)",
+              marginBottom: "0.5em",
+            },
+            ".primaryPinkButton": {
+              background: "#ff1cf7",
+              color: "white",
+              borderRadius: "0",
+              height: "auto",
+            },
+            ".actionTabsPanel": {
+              width: "400px",
+            },
+            ".logo": {
+              maxWidth: "80rem",
+              margin: "0 auto",
+              padding: "32px 0 0 32px",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            },
+          }),
+        }}
+      >
+        <div className="logo">
+          <Image
+            withPlaceholder
+            maw={140}
+            src="images/aiconfigLogo.png"
+            alt="AiConfig Logo"
+          />
+        </div>
         {!aiconfig ? (
           <Flex justify="center" mt="xl">
             <Loader size="xl" />

diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
@@ -676,16 +676,16 @@ export default function EditorContainer({
           <Tooltip
             label={isDirty ? "Save changes to config" : "No unsaved changes"}
           >
-            <div>
-              <Button
-                leftIcon={<IconDeviceFloppy />}
-                loading={isSaving}
-                onClick={onSave}
-                disabled={!isDirty}
-              >
-                Save
-              </Button>
-            </div>
+            <Button
+              leftIcon={<IconDeviceFloppy />}
+              loading={isSaving}
+              onClick={onSave}
+              disabled={!isDirty}
+              size="xs"
+              variant="gradient"
+            >
+              Save
+            </Button>
           </Tooltip>
         </Flex>
         <ConfigNameDescription

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx b/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx
@@ -40,12 +40,15 @@ export default memo(function ModelSelector({
     <Autocomplete
       placeholder="Select model"
       limit={100}
+      className="ghost"
+      variant="unstyled"
       maxDropdownHeight={200}
       rightSection={
         selectedModel ? (
           <Button
             size="xs"
             variant="subtle"
+            className="ghost"
             mr={10}
             onClick={() => {
               onSelectModel(undefined);

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx
@@ -66,7 +66,7 @@ export default memo(function PromptActionBar({
                 )}
               </Tabs.List>
 
-              <Tabs.Panel value="settings">
+              <Tabs.Panel value="settings" className="actionTabsPanel">
                 <ModelSettingsRenderer
                   settings={getModelSettings(prompt)}
                   schema={modelSettingsSchema}
@@ -79,7 +79,7 @@ export default memo(function PromptActionBar({
               </Tabs.Panel>
 
               {checkParametersSupported(prompt) && (
-                <Tabs.Panel value="parameters">
+                <Tabs.Panel value="parameters" className="actionTabsPanel">
                   <ParametersRenderer
                     initialValue={getPromptParameters(prompt)}
                     onUpdateParameters={onUpdateParameters}

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx
@@ -3,7 +3,7 @@ import PromptInputRenderer from "./prompt_input/PromptInputRenderer";
 import PromptOutputsRenderer from "./prompt_outputs/PromptOutputsRenderer";
 import { ClientPrompt } from "../../shared/types";
 import { getPromptSchema } from "../../utils/promptUtils";
-import { Flex, Card, createStyles } from "@mantine/core";
+import { Flex, Card } from "@mantine/core";
 import { PromptInput as AIConfigPromptInput, JSONObject } from "aiconfig";
 import { memo, useCallback } from "react";
 import PromptOutputBar from "./PromptOutputBar";
@@ -31,21 +31,6 @@ type Props = {
   defaultConfigModelName?: string;
 };
 
-const useStyles = createStyles((theme) => ({
-  promptInputCard: {
-    flex: 1,
-    borderRight: "0 !important",
-    borderBottomRightRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  actionBar: {
-    border: `1px solid ${theme.colors.gray[3]}`,
-    borderRadius: "0.25em",
-    borderBottomLeftRadius: 0,
-    borderTopLeftRadius: 0,
-  },
-}));
-
 export default memo(function PromptContainer({
   prompt,
   getModels,
@@ -96,11 +81,9 @@ export default memo(function PromptContainer({
   const promptSchema = getPromptSchema(prompt, defaultConfigModelName);
   const inputSchema = promptSchema?.input;
 
-  const { classes } = useStyles();
-
   return (
     <Flex justify="space-between" w="100%">
-      <Card withBorder className={classes.promptInputCard}>
+      <Card withBorder className="cellStyle">
         <Flex direction="column">
           <Flex justify="space-between" mb="0.5em">
             <PromptName
@@ -124,7 +107,7 @@ export default memo(function PromptContainer({
           {prompt.outputs && <PromptOutputsRenderer outputs={prompt.outputs} />}
         </Flex>
       </Card>
-      <div className={classes.actionBar}>
+      <div className="sidePanel">
         <PromptActionBar
           prompt={prompt}
           promptSchema={promptSchema}

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx
@@ -23,6 +23,8 @@ export default memo(function PromptName({ promptId, name, onUpdate }: Props) {
   return (
     <TextInput
       value={nameInput}
+      className="ghost"
+      variant="unstyled"
       placeholder="Name this prompt"
       onChange={onChange}
       error={

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx
@@ -4,8 +4,10 @@ import { memo } from "react";
 export default memo(function PromptOutputBar() {
   return (
     <Flex direction="column" mt="0.5em">
-      <Divider size="sm" mt="0.5em" mb="0.5em" />
-      <Text color="dimmed">Output</Text>
+      <Divider size="sm" className="divider" />
+      <Text color="dimmed" size={"xs"} className="monoFont">
+        Output
+      </Text>
       {/* TODO: Add output metrics */}
     </Flex>
   );

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx
@@ -1,4 +1,4 @@
-import { Button, createStyles, Loader, Text } from "@mantine/core";
+import { Button, Loader, Text } from "@mantine/core";
 import { IconPlayerPlayFilled, IconPlayerStop } from "@tabler/icons-react";
 import { memo } from "react";
 
@@ -8,28 +8,19 @@ type Props = {
   size: "compact" | "full";
 };
 
-const useStyles = createStyles(() => ({
-  executeButton: {
-    borderBottomLeftRadius: 0,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-}));
-
 export default memo(function RunPromptButton({
   runPrompt,
   size,
   isRunning = false,
 }: Props) {
-  const { classes } = useStyles();
   return (
     <Button
       onClick={runPrompt}
       disabled={isRunning}
       p="xs"
       size="xs"
       fullWidth={size === "full"}
-      className={classes.executeButton}
+      className="primaryPinkButton"
     >
       {isRunning ? (
         <div>

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputRenderer.tsx
@@ -21,17 +21,6 @@ export default memo(function PromptInputRenderer({
   const [isRawJSON, setIsRawJSON] = useState(false);
   return (
     <>
-      <Flex justify="flex-end">
-        <Tooltip label="Toggle JSON editor" withArrow>
-          <ActionIcon onClick={() => setIsRawJSON((curr) => !curr)}>
-            {isRawJSON ? (
-              <IconBracesOff size="1rem" />
-            ) : (
-              <IconBraces size="1rem" />
-            )}
-          </ActionIcon>
-        </Tooltip>
-      </Flex>
       {isRawJSON ? (
         <PromptInputJSONRenderer input={input} onChangeInput={onChangeInput} />
       ) : schema ? (
@@ -46,6 +35,17 @@ export default memo(function PromptInputRenderer({
           onChangeInput={onChangeInput}
         />
       )}
+      <Flex justify="flex-end">
+        <Tooltip label="Toggle JSON editor" withArrow>
+          <ActionIcon onClick={() => setIsRawJSON((curr) => !curr)}>
+            {isRawJSON ? (
+              <IconBracesOff size="1rem" />
+            ) : (
+              <IconBraces size="1rem" />
+            )}
+          </ActionIcon>
+        </Tooltip>
+      </Flex>
     </>
   );
 });
diff --git a/...r/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx b/...r/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
@@ -75,6 +75,7 @@ export default memo(function PromptInputSchemaRenderer(props: Props) {
         value={props.input}
         onChange={(e) => props.onChangeInput(e.target.value)}
         placeholder="Type a prompt"
+        autosize
       />
     );
   } else {