[editor] Load AIConfig on Client from Python Server (#593)

# [editor] Load AIConfig on Client from Python Server Hit the `api/load` endpoint on the server port (with temporary hard-coded file path until we can load without path param) and ensure the editor loads: ![Screenshot 2023-12-22 at 3 33 46 PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/c4fbaff4-f887-45f4-8619-a9c6b3aee623)
lastmile-ai · Dec 22, 2023 · 2bf5458 · 2bf5458
2 parents e933ed4 + 61dd3b2
commit 2bf5458
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git a/python/src/aiconfig/editor/client/package.json b/python/src/aiconfig/editor/client/package.json
@@ -39,9 +39,10 @@
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^8.0.6",
+    "react-scripts": "5.0.1",
     "remark-gfm": "^4.0.0",
     "ufetch": "^1.6.0",
-    "react-scripts": "5.0.1"
+    "url-join": "^5.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",
@@ -52,4 +53,4 @@
     "eslint-config-next": "14.0.2",
     "typescript": "^5"
   }
-}
+}
diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -4,12 +4,15 @@ import { Flex, Loader } from "@mantine/core";
 import { AIConfig } from "aiconfig";
 import { useCallback, useEffect, useState } from "react";
 import { ufetch } from "ufetch";
+import { ROUTE_TABLE } from "./utils/api";
 
 export default function Editor() {
   const [aiconfig, setAiConfig] = useState<ClientAIConfig | undefined>();
 
   const loadConfig = useCallback(async () => {
-    const res = await ufetch.post(`/api/load`, {});
+    const res = await ufetch.post(ROUTE_TABLE.LOAD, {
+      path: "cli/aiconfig-editor/travel.aiconfig.json",
+    });
 
     setAiConfig(res.aiconfig);
   }, []);
@@ -18,10 +21,6 @@ export default function Editor() {
     loadConfig();
   }, [loadConfig]);
 
-  const onBackNavigation = useCallback(() => {
-    //  TODO: Handle file back navigation
-  }, []);
-
   const onSave = useCallback(async (aiconfig: AIConfig) => {
     const res = await ufetch.post(`/api/aiconfig/save`, {
       // path: file path,
@@ -37,11 +36,7 @@ export default function Editor() {
           <Loader size="xl" />
         </Flex>
       ) : (
-        <EditorContainer
-          aiconfig={aiconfig}
-          onBackNavigation={onBackNavigation}
-          onSave={onSave}
-        />
+        <EditorContainer aiconfig={aiconfig} onSave={onSave} />
       )}
     </div>
   );

diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
@@ -8,7 +8,6 @@ import { ClientAIConfig, clientConfigToAIConfig } from "../shared/types";
 
 type Props = {
   aiconfig: ClientAIConfig;
-  onBackNavigation: () => void;
   onSave: (aiconfig: AIConfig) => Promise<void>;
 };
 
@@ -23,7 +22,6 @@ const useStyles = createStyles((theme) => ({
 
 export default function EditorContainer({
   aiconfig: initialAIConfig,
-  onBackNavigation,
   onSave,
 }: Props) {
   const [isSaving, setIsSaving] = useState(false);
@@ -79,9 +77,6 @@ export default function EditorContainer({
     <>
       <Container maw="80rem">
         <Group grow m="sm">
-          <Button onClick={onBackNavigation} variant="default" mr="lg">
-            Back
-          </Button>
           {/* <Text sx={{ textOverflow: "ellipsis", overflow: "hidden" }} size={14}>
             {path || "No path specified"}
           </Text> */}

diff --git a/...src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx b/...src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
@@ -16,11 +16,12 @@ const ExecuteResultOutput = memo(function ExecuteResultOutput({
 }: {
   output: ClientExecuteResult;
 }) {
-  switch (output.renderData.type) {
-    case "text":
-      return <TextRenderer content={output.renderData.text} />;
-    // TODO: Handle other types of outputs
-  }
+  return null;
+  // switch (output.renderData.type) {
+  //   case "text":
+  //     return <TextRenderer content={output.renderData.text} />;
+  //   // TODO: Handle other types of outputs
+  // }
 });
 
 const Output = memo(function Output({

diff --git a/python/src/aiconfig/editor/client/src/utils/api.ts b/python/src/aiconfig/editor/client/src/utils/api.ts
@@ -0,0 +1,10 @@
+import urlJoin from "url-join";
+
+// TODO: Figure out how to dynamically set this based on port specified by script
+const ENDPOINT = "http://localhost:8080";
+
+const API_ENDPOINT = `${ENDPOINT}/api`;
+
+export const ROUTE_TABLE = {
+  LOAD: urlJoin(API_ENDPOINT, "/load"),
+};
diff --git a/python/src/aiconfig/editor/client/yarn.lock b/python/src/aiconfig/editor/client/yarn.lock
@@ -11188,6 +11188,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-join@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-5.0.0.tgz#c2f1e5cbd95fa91082a93b58a1f42fecb4bdbcf1"
+  integrity sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==
+
 url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"