From 54d7f130794d8947951705703cffec0b3ee7ad4b Mon Sep 17 00:00:00 2001 From: Ryan Holinshead <> Date: Wed, 27 Dec 2023 11:27:05 -0500 Subject: [PATCH 1/3] [editor] Prompt Output Bar # [editor] Prompt Output Bar Placeholder/starting point for the Output bar. In the future, we'll add metrics such as token usage to this component. Screenshot 2023-12-27 at 11 26 16 AM --- .../src/components/prompt/PromptContainer.tsx | 2 ++ .../src/components/prompt/PromptOutputBar.tsx | 14 ++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx 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..222c63746 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; @@ -88,6 +89,7 @@ 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 */} + + ); +}); From e2d893f28818ad741b243bf0f044525f42766531 Mon Sep 17 00:00:00 2001 From: Ryan Holinshead <> Date: Wed, 27 Dec 2023 11:29:02 -0500 Subject: [PATCH 2/3] [editor] Run Prompt Button UI # [editor] Run Prompt Button UI Adding the Run prompt button to the UI; will connect the callbacks/server request in subsequent PR Screenshot 2023-12-27 at 11 28 23 AM Screenshot 2023-12-27 at 11 28 31 AM --- .../src/components/prompt/PromptActionBar.tsx | 87 +++++++++++-------- .../src/components/prompt/PromptContainer.tsx | 8 +- .../src/components/prompt/RunPromptButton.tsx | 33 +++++++ .../model_settings/ModelSettingsRenderer.tsx | 15 +++- 4 files changed, 100 insertions(+), 43 deletions(-) create mode 100644 python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx 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 222c63746..6925c67f4 100644 --- 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 && } - +
- +
); }); 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} ); From 14dfa123ef987a03cda318ca45c1e1f8128c573d Mon Sep 17 00:00:00 2001 From: Ryan Holinshead <> Date: Wed, 27 Dec 2023 11:32:58 -0500 Subject: [PATCH 3/3] [editor] Add MantineProvider to Unblock Styling Work --- .../src/aiconfig/editor/client/src/Editor.tsx | 28 ++++++++++--------- .../src/components/ParametersRenderer.tsx | 3 -- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx index dbfb1a105..714516e5c 100644 --- 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 (
- {!aiconfig ? ( - - - - ) : ( - - )} + + {!aiconfig ? ( + + + + ) : ( + + )} +
); } diff --git a/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx b/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx index 396ba11fc..57d98090c 100644 --- 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 (