[editor] Add MantineProvider to Unblock Styling Work (#640)

# [editor] Add MantineProvider to Unblock Styling Work Adding the [MantineProvider](https://mantine.dev/theming/mantine-provider/) around the editor to allow customizing theme/styles from the root component. This will allow differentiation between local editor and gradio ## Testing: - Load editor without issue - Temporarily set theme={{primaryColor: "red"}} and see the correct changes --- Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/640). * __->__ #640 * #639 * #638
lastmile-ai · Dec 27, 2023 · ea91e27 · ea91e27
2 parents 9d8a43d + 14dfa12
commit ea91e27
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 59 deletions.
diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -1,6 +1,6 @@
 import EditorContainer from "./components/EditorContainer";
 import { ClientAIConfig } from "./shared/types";
-import { Flex, Loader } from "@mantine/core";
+import { Flex, Loader, MantineProvider } from "@mantine/core";
 import { AIConfig, Prompt } from "aiconfig";
 import { useCallback, useEffect, useState } from "react";
 import { ufetch } from "ufetch";
@@ -51,18 +51,20 @@ export default function Editor() {
 
   return (
     <div>
-      {!aiconfig ? (
-        <Flex justify="center" mt="xl">
-          <Loader size="xl" />
-        </Flex>
-      ) : (
-        <EditorContainer
-          aiconfig={aiconfig}
-          onSave={onSave}
-          getModels={getModels}
-          addPrompt={addPrompt}
-        />
-      )}
+      <MantineProvider withGlobalStyles withNormalizeCSS>
+        {!aiconfig ? (
+          <Flex justify="center" mt="xl">
+            <Loader size="xl" />
+          </Flex>
+        ) : (
+          <EditorContainer
+            aiconfig={aiconfig}
+            onSave={onSave}
+            getModels={getModels}
+            addPrompt={addPrompt}
+          />
+        )}
+      </MantineProvider>
     </div>
   );
 }
diff --git a/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx b/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx
@@ -193,9 +193,6 @@ export default memo(function ParametersRenderer(props: {
     });
   }, [onUpdateParameters]);
 
-  // TODO: saqadri - add MantineProvider wrapper inside EditorContainer in order for this to pick up context
-  const theme = useMantineTheme();
-
   return (
     <div
       style={{

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx
@@ -9,6 +9,7 @@ import { ActionIcon, Container, Flex, Tabs } from "@mantine/core";
 import { IconClearAll } from "@tabler/icons-react";
 import { memo, useState } from "react";
 import ParametersRenderer, { ParametersArray } from "../ParametersRenderer";
+import RunPromptButton from "./RunPromptButton";
 
 type Props = {
   prompt: ClientPrompt;
@@ -44,48 +45,60 @@ export default memo(function PromptActionBar({
   const promptMetadataSchema = promptSchema?.prompt_metadata;
 
   return (
-    <Flex direction="column" justify="space-between">
+    <Flex direction="column" justify="space-between" h="100%">
       {isExpanded ? (
-        <Container miw="400px">
-          <ActionIcon size="sm" onClick={() => setIsExpanded(false)}>
-            <IconClearAll />
-          </ActionIcon>
-          <Tabs defaultValue="settings">
-            <Tabs.List>
-              <Tabs.Tab value="settings">Settings</Tabs.Tab>
-              {checkParametersSupported(prompt) && (
-                <Tabs.Tab value="parameters">
-                  Local Variables (Parameters)
-                </Tabs.Tab>
-              )}
-            </Tabs.List>
+        <>
+          <Container miw="400px">
+            <ActionIcon
+              size="sm"
+              onClick={() => setIsExpanded(false)}
+              mt="0.5em"
+            >
+              <IconClearAll />
+            </ActionIcon>
+            <Tabs defaultValue="settings" mb="1em">
+              <Tabs.List>
+                <Tabs.Tab value="settings">Settings</Tabs.Tab>
+                {checkParametersSupported(prompt) && (
+                  <Tabs.Tab value="parameters">
+                    Local Variables (Parameters)
+                  </Tabs.Tab>
+                )}
+              </Tabs.List>
 
-            <Tabs.Panel value="settings">
-              <ModelSettingsRenderer
-                settings={getModelSettings(prompt)}
-                schema={modelSettingsSchema}
-                onUpdateModelSettings={onUpdateModelSettings}
-              />
-              <PromptMetadataRenderer
-                prompt={prompt}
-                schema={promptMetadataSchema}
-              />
-            </Tabs.Panel>
-
-            {checkParametersSupported(prompt) && (
-              <Tabs.Panel value="parameters">
-                <ParametersRenderer
-                  initialValue={getPromptParameters(prompt)}
-                  onUpdateParameters={onUpdateParameters}
+              <Tabs.Panel value="settings">
+                <ModelSettingsRenderer
+                  settings={getModelSettings(prompt)}
+                  schema={modelSettingsSchema}
+                  onUpdateModelSettings={onUpdateModelSettings}
+                />
+                <PromptMetadataRenderer
+                  prompt={prompt}
+                  schema={promptMetadataSchema}
                 />
               </Tabs.Panel>
-            )}
-          </Tabs>{" "}
-        </Container>
+
+              {checkParametersSupported(prompt) && (
+                <Tabs.Panel value="parameters">
+                  <ParametersRenderer
+                    initialValue={getPromptParameters(prompt)}
+                    onUpdateParameters={onUpdateParameters}
+                  />
+                </Tabs.Panel>
+              )}
+            </Tabs>
+          </Container>
+          <RunPromptButton prompt={prompt} size="full" />
+        </>
       ) : (
-        <ActionIcon size="sm" onClick={() => setIsExpanded(true)}>
-          <IconClearAll />
-        </ActionIcon>
+        <Flex direction="column" justify="space-between" h="100%">
+          <Flex direction="row" justify="center" mt="0.5em">
+            <ActionIcon size="sm" onClick={() => setIsExpanded(true)}>
+              <IconClearAll />
+            </ActionIcon>
+          </Flex>
+          <RunPromptButton prompt={prompt} size="compact" />
+        </Flex>
       )}
     </Flex>
   );

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx
@@ -7,6 +7,7 @@ import { Flex, Card, Text, createStyles } from "@mantine/core";
 import { PromptInput as AIConfigPromptInput } from "aiconfig";
 import { memo, useCallback } from "react";
 import { ParametersArray } from "../ParametersRenderer";
+import PromptOutputBar from "./PromptOutputBar";
 
 type Props = {
   index: number;
@@ -24,7 +25,9 @@ const useStyles = createStyles((theme) => ({
     borderBottomRightRadius: 0,
     borderTopRightRadius: 0,
   },
-  actionBarCard: {
+  actionBar: {
+    border: `1px solid ${theme.colors.gray[3]}`,
+    borderRadius: "0.25em",
     borderBottomLeftRadius: 0,
     borderTopLeftRadius: 0,
   },
@@ -88,17 +91,18 @@ export default memo(function PromptContainer({
             schema={inputSchema}
             onChangeInput={onChangeInput}
           />
+          <PromptOutputBar />
           {prompt.outputs && <PromptOutputsRenderer outputs={prompt.outputs} />}
         </Flex>
       </Card>
-      <Card withBorder className={classes.actionBarCard}>
+      <div className={classes.actionBar}>
         <PromptActionBar
           prompt={prompt}
           promptSchema={promptSchema}
           onUpdateModelSettings={updateModelSettings}
           onUpdateParameters={updateParameters}
         />
-      </Card>
+      </div>
     </Flex>
   );
 });
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx
@@ -0,0 +1,14 @@
+import { Divider, Flex, Text } from "@mantine/core";
+import { memo } from "react";
+
+type Props = {};
+
+export default memo(function PromptOutputBar(_props: Props) {
+  return (
+    <Flex direction="column" mt="0.5em">
+      <Divider size="sm" mt="0.5em" mb="0.5em" />
+      <Text color="dimmed">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
@@ -0,0 +1,33 @@
+import { ClientPrompt } from "../../shared/types";
+import { Button, createStyles, Flex, Text } from "@mantine/core";
+import { IconPlayerPlayFilled } from "@tabler/icons-react";
+import { memo } from "react";
+
+type Props = {
+  prompt: ClientPrompt;
+  size: "compact" | "full";
+};
+
+const useStyles = createStyles(() => ({
+  executeButton: {
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+}));
+
+export default memo(function RunPromptButton({ prompt, size }: Props) {
+  const { classes } = useStyles();
+  return (
+    <Button
+      onClick={() => {}}
+      p="xs"
+      size="xs"
+      fullWidth={size === "full"}
+      className={classes.executeButton}
+    >
+      <IconPlayerPlayFilled size="16" />
+      {size === "full" && <Text ml="0.5em">Run</Text>}
+    </Button>
+  );
+});
diff --git a/...src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx b/...src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
@@ -1,7 +1,7 @@
 import ModelSettingsConfigRenderer from "./ModelSettingsConfigRenderer";
 import ModelSettingsSchemaRenderer from "./ModelSettingsSchemaRenderer";
 import { GenericPropertiesSchema } from "../../../utils/promptUtils";
-import { Flex, Text } from "@mantine/core";
+import { Flex, createStyles } from "@mantine/core";
 import { JSONObject } from "aiconfig";
 import { memo } from "react";
 
@@ -11,11 +11,21 @@ type Props = {
   onUpdateModelSettings: (settings: Record<string, unknown>) => void;
 };
 
+const useStyles = createStyles(() => ({
+  settingsContainer: {
+    maxHeight: "400px",
+    overflow: "auto",
+    paddingTop: "0.5em",
+    width: "100%",
+  },
+}));
+
 export default memo(function ModelSettingsRenderer({
   settings,
   schema,
   onUpdateModelSettings,
 }: Props) {
+  const { classes } = useStyles();
   let settingsComponent;
 
   if (schema) {
@@ -31,8 +41,7 @@ export default memo(function ModelSettingsRenderer({
   }
 
   return (
-    <Flex direction="column">
-      <Text>Model Settings</Text>
+    <Flex direction="column" className={classes.settingsContainer}>
       {settingsComponent}
     </Flex>
   );