[editor] Add 'Metadata' Section Under Settings Tab

python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx

@@ -244,19 +244,21 @@ function AIConfigEditorBase({
       async (
         promptName: string,
         newPrompt: Prompt,
-        onSuccess: (aiconfigRes: AIConfig) => void,
-        onError: (err: unknown) => void
+        callbacks: {
+          onSuccess?: (aiconfigRes: AIConfig) => void;
+          onError?: (err: unknown) => void;
+        }
       ) => {
         try {
           const serverConfigRes = await updatePromptCallback(
             promptName,
             newPrompt
           );
           if (serverConfigRes?.aiconfig) {
-            onSuccess(serverConfigRes.aiconfig);
+            callbacks?.onSuccess?.(serverConfigRes.aiconfig);
           }
         } catch (err: unknown) {
-          onError(err);
+          callbacks?.onError?.(err);
         }
       },
       DEBOUNCE_MS
@@ -302,13 +304,15 @@ function AIConfigEditorBase({
             ...prompt,
             input: newPromptInput,
           },
-          (config) =>
-            dispatch({
-              type: "CONSOLIDATE_AICONFIG",
-              action,
-              config,
-            }),
-          onError
+          {
+            onSuccess: (config) =>
+              dispatch({
+                type: "CONSOLIDATE_AICONFIG",
+                action,
+                config,
+              }),
+            onError,
+          }
         );
       } catch (err: unknown) {
         onError(err);
@@ -350,15 +354,17 @@ function AIConfigEditorBase({
           // PromptName component maintains local state for the name to show in the UI
           // We cannot update client config state until the name is successfully set server-side
           // or else we could end up referencing a prompt name that is not set server-side
-          () => {
-            dispatch({
-              type: "UPDATE_PROMPT_NAME",
-              id: promptId,
-              name: newName,
-            });
-            logEventHandler?.("UPDATE_PROMPT_NAME");
-          },
-          onError
+          {
+            onSuccess: () => {
+              dispatch({
+                type: "UPDATE_PROMPT_NAME",
+                id: promptId,
+                name: newName,
+              });
+              logEventHandler?.("UPDATE_PROMPT_NAME");
+            },
+            onError,
+          }
         );
       } catch (err: unknown) {
         onError(err);
@@ -392,6 +398,57 @@ function AIConfigEditorBase({
     );
   }, [updateModelCallback]);
 
+  const onUpdatePromptMetadata = useCallback(
+    async (promptId: string, newMetadata: JSONObject) => {
+      if (!debouncedUpdatePrompt) {
+        // Just no-op if no callback specified. We could technically perform
+        // client-side updates but that might be confusing
+        return;
+      }
+
+      dispatch({
+        type: "UPDATE_PROMPT_METADATA",
+        id: promptId,
+        metadata: newMetadata,
+      });
+
+      const onError = (err: unknown) => {
+        const message = (err as RequestCallbackError).message ?? null;
+        showNotification({
+          title: "Error updating prompt metadata",
+          message,
+          type: "error",
+        });
+      };
+
+      try {
+        const statePrompt = getPrompt(stateRef.current, promptId);
+        if (!statePrompt) {
+          throw new Error(`Could not find prompt with id ${promptId}`);
+        }
+        const prompt = clientPromptToAIConfigPrompt(statePrompt);
+
+        await debouncedUpdatePrompt(
+          prompt.name,
+          {
+            ...prompt,
+            metadata: {
+              ...newMetadata,
+              model: prompt.metadata?.model,
+              parameters: prompt.metadata?.parameters,
+            },
+          },
+          {
+            onError,
+          }
+        );
+      } catch (err: unknown) {
+        onError(err);
+      }
+    },
+    [debouncedUpdatePrompt, showNotification]
+  );
+
   const onUpdatePromptModelSettings = useCallback(
     async (promptId: string, newModelSettings: JSONObject) => {
       if (!debouncedUpdateModel) {
@@ -1098,6 +1155,7 @@ function AIConfigEditorBase({
           onChangePromptName={onChangePromptName}
           onDeletePrompt={onDeletePrompt}
           onRunPrompt={onRunPrompt}
+          onUpdatePromptMetadata={onUpdatePromptMetadata}
           onUpdatePromptModel={onUpdatePromptModel}
           onUpdatePromptModelSettings={onUpdatePromptModelSettings}
           onUpdatePromptParameters={onUpdatePromptParameters}

python/src/aiconfig/editor/client/src/components/SettingsPropertyRenderer.tsx

@@ -334,6 +334,7 @@ export default function SettingsPropertyRenderer({
             setAndPropagateValue(event.currentTarget.checked)
           }
           disabled={readOnly}
+          styles={{ inner: { alignSelf: "center" } }}
         />
       );
       break;

python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx

@@ -17,6 +17,7 @@ type Props = {
   promptSchema?: PromptSchema;
   onUpdateModelSettings: (settings: Record<string, unknown>) => void;
   onUpdateParameters: (parameters: JSONObject) => void;
+  onUpdatePromptMetadata: (metadata: JSONObject) => void;
 };
 
 // Don't default to config-level model settings since that could be confusing
@@ -27,6 +28,22 @@ function getModelSettings(prompt: ClientPrompt) {
   }
 }
 
+function getMetadata(prompt: ClientPrompt) {
+  const metadata = { ...prompt.metadata };
+
+  // Model and parameters handled as their own tabs
+  delete metadata.model;
+  delete metadata.parameters;
+
+  // Tags are set to null by default by python sdk. For now, exclude if null
+  // We may want to add special UI for tags later
+  if (metadata.tags === null) {
+    delete metadata.tags;
+  }
+
+  return metadata;
+}
+
 function getPromptParameters(prompt: ClientPrompt) {
   return prompt.metadata?.parameters;
 }
@@ -45,6 +62,7 @@ export default memo(function PromptActionBar({
   promptSchema,
   onUpdateModelSettings,
   onUpdateParameters,
+  onUpdatePromptMetadata,
 }: Props) {
   const [isExpanded, setIsExpanded] = useState(false);
   // TODO: Handle drag-to-resize
@@ -86,10 +104,14 @@ export default memo(function PromptActionBar({
                   schema={modelSettingsSchema}
                   onUpdateModelSettings={onUpdateModelSettings}
                 />
-                <PromptMetadataRenderer
-                  prompt={prompt}
-                  schema={promptMetadataSchema}
-                />
+                {/* For now, just render metadata if a schema is explicitly provided */}
+                {promptMetadataSchema && (
+                  <PromptMetadataRenderer
+                    metadata={getMetadata(prompt)}
+                    onUpdatePromptMetadata={onUpdatePromptMetadata}
+                    schema={promptMetadataSchema}
+                  />
+                )}
               </ScrollArea>
             </Tabs.Panel>
 

python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx

@@ -31,6 +31,7 @@ type Props = {
     promptId: string,
     newParameters: Record<string, unknown>
   ) => void;
+  onUpdatePromptMetadata: (promptId: string, newMetadata: JSONObject) => void;
   defaultConfigModelName?: string;
   isRunButtonDisabled?: boolean;
 };
@@ -48,6 +49,7 @@ export default memo(function PromptContainer({
   onUpdateModel,
   onUpdateModelSettings,
   onUpdateParameters,
+  onUpdatePromptMetadata,
   isRunButtonDisabled = false,
 }: Props) {
   const promptId = prompt._ui.id;
@@ -72,6 +74,11 @@ export default memo(function PromptContainer({
     [promptId, onUpdateParameters]
   );
 
+  const updatePromptMetadata = useCallback(
+    (metadata: JSONObject) => onUpdatePromptMetadata(promptId, metadata),
+    [promptId, onUpdatePromptMetadata]
+  );
+
   const runPrompt = useCallback(
     async () => await onRunPrompt(promptId),
     [promptId, onRunPrompt]
@@ -171,6 +178,7 @@ export default memo(function PromptContainer({
           promptSchema={promptSchema}
           onUpdateModelSettings={updateModelSettings}
           onUpdateParameters={updateParameters}
+          onUpdatePromptMetadata={updatePromptMetadata}
         />
       </div>
     </Flex>

python/src/aiconfig/editor/client/src/components/prompt/PromptsContainer.tsx

@@ -19,6 +19,10 @@ type Props = {
   onChangePromptName: (promptId: string, newName: string) => Promise<void>;
   onDeletePrompt: (promptId: string) => Promise<void>;
   onRunPrompt: (promptId: string) => Promise<void>;
+  onUpdatePromptMetadata: (
+    promptId: string,
+    newMetadata: JSONObject
+  ) => Promise<void>;
   onUpdatePromptModel: (promptId: string, newModel?: string) => Promise<void>;
   onUpdatePromptModelSettings: (
     promptId: string,
@@ -76,6 +80,7 @@ export default memo(function PromptsContainer(props: Props) {
                 onUpdateModel={props.onUpdatePromptModel}
                 onUpdateModelSettings={props.onUpdatePromptModelSettings}
                 onUpdateParameters={props.onUpdatePromptParameters}
+                onUpdatePromptMetadata={props.onUpdatePromptMetadata}
                 defaultConfigModelName={props.defaultModel}
                 isRunButtonDisabled={isAnotherPromptRunning}
               />

python/src/aiconfig/editor/client/src/components/prompt/prompt_metadata/PromptMetadataRenderer.tsx

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