diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx
index 643b7b04e..ef7d1b681 100644
--- 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 (
-
+
{isExpanded ? (
-
- setIsExpanded(false)}>
-
-
-
-
- Settings
- {checkParametersSupported(prompt) && (
-
- Local Variables (Parameters)
-
- )}
-
+ <>
+
+ setIsExpanded(false)}
+ mt="0.5em"
+ >
+
+
+
+
+ Settings
+ {checkParametersSupported(prompt) && (
+
+ Local Variables (Parameters)
+
+ )}
+
-
-
-
-
-
- {checkParametersSupported(prompt) && (
-
-
+
+
- )}
- {" "}
-
+
+ {checkParametersSupported(prompt) && (
+
+
+
+ )}
+
+
+
+ >
) : (
- setIsExpanded(true)}>
-
-
+
+
+ setIsExpanded(true)}>
+
+
+
+
+
)}
);
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx
index 48f53d16a..6925c67f4 100644
--- 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}
/>
+
{prompt.outputs && }
-
+
);
});
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx
new file mode 100644
index 000000000..cc9815114
--- /dev/null
+++ 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 (
+
+
+ Output
+ {/* TODO: Add output metrics */}
+
+ );
+});
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx
new file mode 100644
index 000000000..35b5a2c88
--- /dev/null
+++ 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 (
+
+ );
+});
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
index 2d1d04806..a29703533 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
+++ b/python/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) => 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 (
-
- Model Settings
+
{settingsComponent}
);