From 61dd3b2fac7abdf49b5f5be24601790324884e8e Mon Sep 17 00:00:00 2001
From: Ryan Holinshead <>
Date: Fri, 22 Dec 2023 12:16:20 -0500
Subject: [PATCH] [editor] Load AIConfig on Client from Python Server

---
 python/src/aiconfig/editor/client/package.json    |  5 +++--
 python/src/aiconfig/editor/client/src/Editor.tsx  | 15 +++++----------
 .../client/src/components/EditorContainer.tsx     |  5 -----
 .../prompt_outputs/PromptOutputsRenderer.tsx      | 11 ++++++-----
 .../src/aiconfig/editor/client/src/utils/api.ts   | 10 ++++++++++
 python/src/aiconfig/editor/client/yarn.lock       |  5 +++++
 6 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 python/src/aiconfig/editor/client/src/utils/api.ts

diff --git a/python/src/aiconfig/editor/client/package.json b/python/src/aiconfig/editor/client/package.json
index 8c8e679c3..ed2a35a24 100644
--- 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"
   }
-}
\ No newline at end of file
+}
diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
index f75bd2360..f83690b6b 100644
--- 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
index d62486483..592a4b3cd 100644
--- 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/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
index ee6279dbb..54f0cef7d 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
+++ b/python/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
new file mode 100644
index 000000000..da2aa8ab4
--- /dev/null
+++ 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
index fd820f868..40eb76e3d 100644
--- 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"