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} );