[editor] Run Prompt Button UI

lastmile-ai · Dec 27, 2023 · 0c6a30a · 0c6a30a
1 parent fa658d9
commit 0c6a30a
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 43 deletions.
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
@@ -25,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,
   },
@@ -93,14 +95,14 @@ export default memo(function PromptContainer({
           {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/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>
   );