Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[editor] JSON Renderer for Model Settings #757

Merged
merged 1 commit into from
Jan 5, 2024
Merged

[editor] JSON Renderer for Model Settings #757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion python/src/aiconfig/editor/client/src/components/JSONEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,11 @@ export default memo(function JSONEditor({
minimap: { enabled: false },
wordWrap: "on",
}}
onMount={(editor, monaco) => configureEditor(editor, monaco, schema)}
onMount={(editor, monaco) => {
if (schema) {
configureEditor(editor, monaco, schema);
}
}}
/>
);
});
51 changes: 35 additions & 16 deletions ...src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import ModelSettingsConfigRenderer from "./ModelSettingsConfigRenderer";
import ModelSettingsSchemaRenderer from "./ModelSettingsSchemaRenderer";
import { GenericPropertiesSchema } from "../../../utils/promptUtils";
import { Flex, createStyles } from "@mantine/core";
import { ActionIcon, Flex, Tooltip, createStyles } from "@mantine/core";
import { JSONObject } from "aiconfig";
import { memo } from "react";
import { memo, useState } from "react";
import { IconBraces, IconBracesOff } from "@tabler/icons-react";
import JSONRenderer from "../../JSONRenderer";

type Props = {
settings?: JSONObject;
Expand All @@ -27,23 +29,40 @@ export default memo(function ModelSettingsRenderer({
onUpdateModelSettings,
}: Props) {
const { classes } = useStyles();
let settingsComponent;

if (schema) {
settingsComponent = (
<ModelSettingsSchemaRenderer
settings={settings}
schema={schema}
onUpdateModelSettings={onUpdateModelSettings}
/>
);
} else if (settings) {
settingsComponent = <ModelSettingsConfigRenderer settings={settings} />;
}
const [isRawJSON, setIsRawJSON] = useState(schema == null);

return (
<Flex direction="column" className={classes.settingsContainer}>
{settingsComponent}
{/* // TODO: Refactor this out to a generic wrapper for toggling JSONRenderer or children component */}
{/* // Only show the toggle if there is a schema to toggle between JSON and custom schema renderer */}
{schema && (
<Flex justify="flex-end">
<Tooltip label="Toggle JSON editor" withArrow>
<ActionIcon onClick={() => setIsRawJSON((curr) => !curr)}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toggle boi!

{isRawJSON ? (
<IconBracesOff size="1rem" />
) : (
<IconBraces size="1rem" />
)}
</ActionIcon>
</Tooltip>
</Flex>
)}
{isRawJSON || !schema ? (
<JSONRenderer
content={settings}
onChange={(val) =>
onUpdateModelSettings(val as Record<string, unknown>)
}
// schema={schema} TODO: Add schema after fixing z-index issue
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's z-index issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-01-05 at 10 48 37 AM

The editor tooltips have lower z-index than the surrounding elements so they're hidden. Just need to look into it and bump it

/>
) : (
<ModelSettingsSchemaRenderer
settings={settings}
schema={schema}
onUpdateModelSettings={onUpdateModelSettings}
/>
)}
</Flex>
);
});
7 changes: 0 additions & 7 deletions python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/JSONOutput.tsx
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions ...n/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from "@tabler/icons-react";
import { Output } from "aiconfig";
import { memo, useState } from "react";
import JSONOutput from "./JSONOutput";
import JSONRenderer from "../../JSONRenderer";

type Props = {
children: React.ReactNode;
Expand Down Expand Up @@ -53,7 +53,7 @@ export default memo(function PromptOutputWrapper({
</Tooltip>
)}
</Flex>
{isRawJSON ? <JSONOutput content={output} /> : <>{children}</>}
{isRawJSON ? <JSONRenderer content={output} /> : <>{children}</>}
</>
);
});
8 changes: 4 additions & 4 deletions ...src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {
} from "aiconfig";
import { memo } from "react";
import { TextRenderer } from "../TextRenderer";
import JSONOutput from "./JSONOutput";
import PromptOutputWrapper from "./PromptOutputWrapper";
import MimeTypeRenderer from "../../MimeTypeRenderer";
import JSONRenderer from "../../JSONRenderer";

type Props = {
outputs: Output[];
Expand All @@ -25,7 +25,7 @@ const ExecuteResultOutput = memo(function ExecuteResultOutput({
output: ExecuteResult;
}) {
if (output.data == null) {
return <JSONOutput content={output} />;
return <JSONRenderer content={output} />;
}

if (typeof output.data === "string") {
Expand Down Expand Up @@ -75,14 +75,14 @@ const ExecuteResultOutput = memo(function ExecuteResultOutput({
// TODO: Tool calls rendering
default:
return (
<JSONOutput
<JSONRenderer
content={(output.data as OutputDataWithToolCallsValue).value}
/>
);
}
}

return <JSONOutput content={output.data} />;
return <JSONRenderer content={output.data} />;
});

const OutputRenderer = memo(function Output({ output }: { output: Output }) {
Expand Down