-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[editor] Add 'Metadata' Tab to Prompt Side Pane
- Loading branch information
Ryan Holinshead
committed
Feb 9, 2024
1 parent
e6193b3
commit b7eeecc
Showing
17 changed files
with
283 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 92 additions & 13 deletions
105
...c/aiconfig/editor/client/src/components/prompt/prompt_metadata/PromptMetadataRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,103 @@ | ||
| import { ClientPrompt } from "../../../shared/types"; | ||
| import { GenericPropertiesSchema } from "../../../utils/promptUtils"; | ||
| import { memo } from "react"; | ||
| import { memo, useState } from "react"; | ||
| import JSONRenderer from "../../JSONRenderer"; | ||
| import { JSONObject } from "aiconfig"; | ||
| import { Flex, Text, createStyles } from "@mantine/core"; | ||
| import JSONEditorToggleButton from "../../JSONEditorToggleButton"; | ||
| import { ErrorBoundary, useErrorBoundary } from "react-error-boundary"; | ||
| import PromptMetadataSchemaRenderer from "./PromptMetadataSchemaRenderer"; | ||
|
|
||
| type Props = { | ||
| prompt: ClientPrompt; | ||
| metadata?: JSONObject; | ||
| onUpdatePromptMetadata: (metadata: JSONObject) => void; | ||
| schema?: GenericPropertiesSchema; | ||
| }; | ||
|
|
||
| function ModelMetadataConfigRenderer(_props: Props) { | ||
| return null; // TODO: Implement | ||
| } | ||
| const useStyles = createStyles(() => ({ | ||
| metadataContainer: { | ||
| overflow: "auto", | ||
| paddingTop: "0.5em", | ||
| width: "100%", | ||
| }, | ||
| })); | ||
|
|
||
| type ErrorFallbackProps = { | ||
| metadata?: JSONObject; | ||
| toggleJSONEditor: () => void; | ||
| }; | ||
|
|
||
| function ModelMetadataSchemaRenderer(_props: Props) { | ||
| return null; // TODO: Implement | ||
| function MetadataErrorFallback({ | ||
| metadata, | ||
| toggleJSONEditor, | ||
| }: ErrorFallbackProps) { | ||
| const { resetBoundary: clearRenderError } = useErrorBoundary(); | ||
| return ( | ||
| <Flex direction="column"> | ||
| <Text color="red" size="sm"> | ||
| <Flex justify="flex-end"> | ||
| <JSONEditorToggleButton | ||
| isRawJSON={false} | ||
| setIsRawJSON={() => { | ||
| clearRenderError(); | ||
| toggleJSONEditor(); | ||
| }} | ||
| /> | ||
| </Flex> | ||
| Invalid metadata format for model. Toggle JSON editor to update. Set to | ||
| {" {}"} in JSON editor and toggle back to reset. | ||
| </Text> | ||
| <JSONRenderer content={metadata} /> | ||
| </Flex> | ||
| ); | ||
| } | ||
|
|
||
| export default memo(function PromptMetadataRenderer({ prompt, schema }: Props) { | ||
| return schema ? ( | ||
| <ModelMetadataSchemaRenderer prompt={prompt} schema={schema} /> | ||
| ) : ( | ||
| <ModelMetadataConfigRenderer prompt={prompt} /> | ||
| export default memo(function PromptMetadataRenderer({ | ||
| metadata, | ||
| onUpdatePromptMetadata, | ||
| schema, | ||
| }: Props) { | ||
| const { classes } = useStyles(); | ||
| const [isRawJSON, setIsRawJSON] = useState(schema == null); | ||
|
|
||
| const rawJSONToggleButton = ( | ||
| <Flex justify="flex-end"> | ||
| <JSONEditorToggleButton | ||
| isRawJSON={isRawJSON} | ||
| setIsRawJSON={setIsRawJSON} | ||
| /> | ||
| </Flex> | ||
| ); | ||
|
|
||
| return ( | ||
| <Flex direction="column" className={classes.metadataContainer}> | ||
| {isRawJSON || !schema ? ( | ||
| <> | ||
| {/* // Only show the toggle if there is a schema to toggle between JSON and custom schema renderer */} | ||
| {schema && rawJSONToggleButton} | ||
| <JSONRenderer | ||
| content={metadata} | ||
| onChange={(val) => | ||
| onUpdatePromptMetadata(val as Record<string, unknown>) | ||
| } | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <ErrorBoundary | ||
| fallbackRender={() => ( | ||
| <MetadataErrorFallback | ||
| metadata={metadata} | ||
| toggleJSONEditor={() => setIsRawJSON(true)} | ||
| /> | ||
| )} | ||
| > | ||
| {rawJSONToggleButton} | ||
| <PromptMetadataSchemaRenderer | ||
| metadata={metadata} | ||
| schema={schema} | ||
| onUpdatePromptMetadata={onUpdatePromptMetadata} | ||
| /> | ||
| </ErrorBoundary> | ||
| )} | ||
| </Flex> | ||
| ); | ||
| }); |
Oops, something went wrong.