Model Settings Renderer Starting Point (#545)

Model Settings Renderer Starting Point # Model Settings Renderer Starting Point Starting point for rendering prompt model settings. The SettingsRenderer is pretty much directly taken from lastmile without any significant changes; subsequent PRs will add additional renderers for types not yet supported (map, union) ## Testing: - Supported settings render and correct values are persisted to the config: https://github.com/lastmile-ai/aiconfig/assets/5060851/a35c43dc-9d0b-408e-9e4f-162c5e6a1342 --- Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/545). * __->__ #545 * #544
lastmile-ai · Dec 19, 2023 · 7b2857d · 7b2857d
2 parents adec054 + b05e724
commit 7b2857d
Show file tree

Hide file tree

Showing 14 changed files with 1,847 additions and 845 deletions.
diff --git a/cli/aiconfig-editor/package.json b/cli/aiconfig-editor/package.json
@@ -25,6 +25,7 @@
     "@mantine/tiptap": "^6.0.7",
     "@tabler/icons-react": "^2.44.0",
     "aiconfig": "^1.1.0",
+    "lodash": "^4.17.21",
     "next": "14.0.2",
     "node-fetch": "^3.3.2",
     "react": "^18",
@@ -34,11 +35,12 @@
     "ufetch": "^1.6.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.0.2",
     "typescript": "^5"
   }
-}
+}
diff --git a/cli/aiconfig-editor/pages/api/aiconfig/save.ts b/cli/aiconfig-editor/pages/api/aiconfig/save.ts
@@ -1,14 +1,15 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { ErrorResponse } from "@/src/shared/serverTypes";
-import { AIConfig, AIConfigRuntime } from "aiconfig";
+import { AIConfig, AIConfigRuntime, Output } from "aiconfig";
+import { ClientAIConfig } from "@/src/shared/types";
 
 type Data = {
   status: string;
 };
 
 type RequestBody = {
   path: string;
-  aiconfig: AIConfig;
+  aiconfig: ClientAIConfig;
 };
 
 export default async function handler(
@@ -29,9 +30,27 @@ export default async function handler(
     return res.status(500).json({ error: "No aiconfig data provided" });
   }
 
+  // TODO: Once ouputs are properly structured, remove this and use body.aiconfig directly
+  const clientAIConfig = body.aiconfig;
+  const config = {
+    ...clientAIConfig,
+    prompts: clientAIConfig.prompts.map((prompt) => ({
+      ...prompt,
+      outputs: prompt.outputs?.map((output) => {
+        if (output.output_type === "execute_result") {
+          const outputWithoutRenderData = { ...output, renderData: undefined };
+          delete outputWithoutRenderData.renderData;
+          return outputWithoutRenderData as Output;
+        } else {
+          return output as Output;
+        }
+      }),
+    })),
+  };
+
   // Construct the config and ensure proper serialization for saving
-  const config = await AIConfigRuntime.loadJSON(body.aiconfig);
-  config.save(body.path, { serializeOutputs: true });
+  const serializedConfig = await AIConfigRuntime.loadJSON(config);
+  serializedConfig.save(body.path, { serializeOutputs: true });
 
   res.status(200).json({ status: "ok" });
 }
diff --git a/cli/aiconfig-editor/src/components/EditorContainer.tsx b/cli/aiconfig-editor/src/components/EditorContainer.tsx
@@ -49,12 +49,25 @@ export default function EditorContainer({
   }, [aiconfigState, onSave]);
 
   const onChangePromptInput = useCallback(
-    (i: number, newPromptInput: PromptInput) => {
+    async (promptIndex: number, newPromptInput: PromptInput) => {
       dispatch({
         type: "UPDATE_PROMPT_INPUT",
-        index: i,
+        index: promptIndex,
         input: newPromptInput,
       });
+      // TODO: Call server-side endpoint to update prompt input
+    },
+    [dispatch]
+  );
+
+  const onUpdatePromptModelSettings = useCallback(
+    async (promptIndex: number, newModelSettings: any) => {
+      dispatch({
+        type: "UPDATE_PROMPT_MODEL_SETTINGS",
+        index: promptIndex,
+        modelSettings: newModelSettings,
+      });
+      // TODO: Call server-side endpoint to update model settings
     },
     [dispatch]
   );
@@ -86,6 +99,7 @@ export default function EditorContainer({
               prompt={prompt}
               key={prompt.name}
               onChangePromptInput={onChangePromptInput}
+              onUpdateModelSettings={onUpdatePromptModelSettings}
               defaultConfigModelName={aiconfigState.metadata.default_model}
             />
           );